:root {
    --blue-logo-color: rgb(0, 128, 255);
    --gray-logo-color: rgb(170, 170, 170);
    --advanced-machines-color: rgb(230, 230, 230);
    --advanced-machines-bg-color: rgb(160, 160, 160);
    --navbar-bg-color: rgb(180, 180, 180);
    --footer-bg-color: rgb(37, 37, 37);
    --txt-color-primary: rgb(37, 37, 37);
    --txt-color-light: rgb(255, 255, 255);
    --txt-color-box: rgb(120, 120, 120);

    --tablet-navbar-size: 14px;
    --tablet-font-size: 12px;

    --mobile-title-size: 12px;
    --mobile-font-size: 10px;

    --light-background-color: rgb(230, 230, 230);
    --light-background-color2: rgb(245, 245, 245);
    --light-background-color3: rgb(250, 250, 250);

    --blue-box-width: 140px;

    /* --home-boxes-dark-background: rgb(80, 80, 80); */
    --home-boxes-dark-background: rgb(37, 37, 37);
}

@font-face {
    font-family: 'Arial-Black';
    src: url('../fonts/Arial-Black.ttf') format('truetype'), 
        url('../fonts/Arial-Black.woff') format('woff'),
        url('../fonts/Arial-Black.woff2') format('woff2');
    /* font-weight: 900; */
    font-weight: normal;
    font-style: normal;
    /* font-display: swap; */
}

* {
    margin: 0;
    padding: 0;
    /* font-family: 'Lato', sans-serif; */
    /* font-family: "Arial Black", Helvetica, sans-serif; */
    /* font-family: Arial, Helvetica, sans-serif; */

    font-family: 'Play', sans-serif;
    /* font-family: 'Rubik', sans-serif; */
    /* font-family: 'Poppins', sans-serif; */

    box-sizing: border-box;
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
}

/* Da se slike i video ne razvuku na ogromnim monitorima */
body {
    max-width: 1920px;
    margin: 0 auto;
}

a {
    display: block;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
}

.blue-color {
    /* color: rgb(0, 128, 255); */
    color: var(--blue-logo-color);
}

.gray-color {
    /* color: rgb(170, 170, 170); */
    color: var(--gray-logo-color);
}

.txt-color-primary {
    color: var(--txt-color-primary);
}

.light-text-color {
    color: var(--advanced-machines-color);
}

.bold {
    font-weight: 600;
}

.container {
    /* position: relative; */
    max-width: 1350px;
    padding: 0 20px;
    margin: 0 auto;
}

@media (max-width: 300px) {
    .container {
        padding: 0 10px;
    }
}

.englishLang {
    display: block;
    /* display: none; */
}

.serbianLang {
    display: none;
    /* display: block; */
}

.subtitle {
    position: absolute;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    color: var(--txt-color-light);
    /* color: var(--blue-logo-color); */
    /* background-color: rgba(37, 37, 37, .8); */
    /* padding: 30px 60px; */
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    letter-spacing: 3px;
    /* text-shadow: 0px 0px 15px #fff; */
    /* text-shadow: 2px 2px 2px rgba(0,128,255,0.8); */
    /* text-shadow: 0px 0px 4px rgba(0,128,255,0.8); */
    text-shadow: 0px 0px 10px rgba(37,37,37,0.8);

    width: 100%;
}

.arial-black {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
}

/* dodajem providno preko slike */
/* .background-image::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
} */



/* --------- HEADER -------- */


header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}




.main-navbar-background {
    background-color: var(--footer-bg-color);
}

.navbar-and-logo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 92px;
    transition: .5s;
}

/* navbar */

.navbar {
    position: relative;
}

.navbar ul {
    display: flex;
}

.navbar ul li a {
    color: var(--txt-color-light);
    /* margin-right: 60px; */
    margin-right: 30px;
    margin-bottom: 3px;
    transition: 0.5s;
}

.blue-color-nav {
    /* color: rgb(0, 128, 255); */
    color: var(--blue-logo-color);
}

@media (min-width: 1001px) {
    .navbar ul li a:hover {
        color: var(--blue-logo-color);
    }
}

.navbar ul li a span {
    /* font-family: "Arial Black", Arial, Helvetica, sans-serif; */
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: Calibri, 'Trebuchet MS', sans-serif; */
    font-size: 18px;
    /* font-weight: 700; */
    /* font-size: 14px; */
}

/* end navbar */


/* logo and flag */

.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 350px;
    /* background-color: rgb(151, 141, 134); */
}

.logo-txt a h1 span {
    /* font-family: "Arial Black", Arial, Helvetica, sans-serif; */
    font-family: "Arial-Black", "Arial Black", Arial, Helvetica, sans-serif;
    /* font-size: 40px; */
    font-size: 32px;
    display: inline-block;
    position: relative;
    bottom: -4px;
}

.language-flag {
    position: relative;
    bottom: 6px;
    height: 15px;
    width: 25px;
    background-color: chocolate;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

.language-flag img {
    height: 15px;
}


.language-arrow-flag {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 45px;
    /* background-color: chocolate; */
}

.language-flag-new {
    position: relative;
    bottom: 4px;
    height: 15px;
    width: 25px;
}

.language-flag-new img {
    height: 100%;
}

#en-flag {
    display: none;
}

.language-arrow {
    position: relative;
    bottom: 2px;
    /* height: 10px; */
    width: 12px;
    cursor: pointer;
}

.flag-container {
    position: absolute;
    top: 16px;
    left: 0;
    width: 55px;
    height: 36px;
    /* background-color: chocolate; */
    /* background-color: var(--footer-bg-color); */
    z-index: 2;

    display: flex;
    justify-content: space-between;
    display: none;
}

.flag-container img {
    position: relative;
    top: 20px;
    height: 15px;
    width: 25px;
    cursor: pointer;
}


/* line advanced machines (grey line header) */

.line-advanced-machines {
    /* background-color: var(--advanced-machines-bg-color); */
    background-color: var(--footer-bg-color);
    /* background-image: linear-gradient(to right, var(--footer-bg-color), var(--advanced-machines-bg-color)); */
    height: 20px;
}

.line-advanced-machines p {
    text-align: right;
    font-family: "Arial-Black", "Arial Black", Arial, Helvetica, sans-serif;
    color: var(--advanced-machines-color);
    /* background-color: rgb(114, 114, 114); */
    background-color: var(--footer-bg-color);
    line-height: 1.2;
    /* font-size: 19.5px; */
    font-size: 16.2px;
}

.line-advanced-machines-two {
    display: flex;
    justify-content: space-between;
}

.gradient-line {
    position: relative;
    top: 5px;
    /* width: 1092px; */
    width: calc(100% - 180px);
    /* height: 14.5px; */
    height: 12px;
    background-image: linear-gradient(to right, var(--footer-bg-color), var(--advanced-machines-color));
}

/* Menu button for mobile */
#menu-button {
    display: none;
}

/* --------- END OF HEADER DESKTOP -------- */



/* --------------- TABLET -------------- */

@media (max-width: 1300px) {

    .logo-container {
        width: 300px;
    }
    
    .logo-txt a h1 span {
        font-size: 32px;
        bottom: -4px;
    }

    /* .line-advanced-machines p {
        font-size: 16.2px;
    } */

    .navbar ul li a {
        margin-right: 30px;
    }
    
    /* .navbar ul li a span {
        font-size: var(--tablet-navbar-size);
    } */

}

@media (max-width: 1180px) {

    .logo-txt a h1 span {
        font-size: 25px;
        bottom: -3px;
    }

    .line-advanced-machines p {
        font-size: 12.5px;
        padding-top: 2px;
    }

    .line-advanced-machines {
        height: 18px;
    }

    .logo-container {
        width: 245px;
        /* justify-content: flex-end; */
    }

    .gradient-line {
        width: calc(100% - 140px);
        /* height: 13px; */
        height: 11px;
    }

    .navbar ul li a span {
        font-size: 15px;
    }

}

/* --------- END OF HEADER TABLET -------- */

/* ------------- MOBILE ------------- */

@media (max-width: 1000px) {

    #menu-button {
        position: relative;
        top: -5px;
        display: block;
        width: 25px;
        height: 18px;
        overflow: hidden;
        z-index: 2;
    }

    .navbar-and-logo {
        /* height: 50px; */
        height: 45px;
        justify-content: space-between;
    }

    .navbar {
        position: absolute;
        top: 63px;
        left: 0;
        width: 100vw;
        z-index: 1;
        border-top: 2px solid var(--gray-logo-color);
        background-color: var(--advanced-machines-bg-color);

        display: none;
    }

    .navbar ul {
        flex-direction: column;
        /* padding: 0 20px; */
    }

    .navbar ul li a {
        margin-right: 0;
        padding: 7px 0 7px 20px;
        border-bottom: 1px solid var(--gray-logo-color);
    }

    .navbar ul li a span {
        font-size: 12px;
    }

    .logo-txt a h1 span {
        font-size: 25px;
        bottom: -3px;
    }

    .line-advanced-machines p {
        font-size: 12.5px;
        padding-top: 2px;
    }

    .line-advanced-machines {
        height: 18px;
    }

    .logo-container {
        width: 240px;
        justify-content: flex-end;
    }

    .language-arrow-flag {
        position: absolute;
        top: 70px;
        right: 20px;
        transition: .5s;
        /* width: 45px; */
        /* background-color: chocolate; */
    }

    .language-flag {
        position: absolute;
        top: 80px;
        right: 20px;
        border: 1px solid var(--footer-bg-color);
        z-index: 2;
    }

    .flag-container {
        top: 5px;
    }

    .gradient-line {
        width: calc(100% - 140px);
        /* height: 13px; */
        height: 11px;
    }

}

/* --------- END OF HEADER MOBILE -------- */




/* -------------------------------- CAROUSEL ------------------------------ */

.carousel {
    position: relative;
    /* height: 930px; */
    height: 650px;
    overflow: hidden;
}

.carousel-button {
    width: 30px;
    z-index: 1;
    border: none;
    background-color: transparent;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
}

#carousel-prev-button {
    left: 30px;
}

#carousel-next-button {
    right: 30px;
}

.carousel-track {
    position: relative;
    /* height: 100%; */
    transition: .5s ease-in;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* max-height: 800px; */
    height: 800px;
    transition: 1s;
}

.carousel-slide-image {
    position: relative;
}

.carousel-slide-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carousel-slide-image img {
    object-fit: center;
}

.carousel-slide-image-1 {
    /* filter: blur(1px); */
    /* Kad je slika onda ide ova pozicija */
    /* bottom: 250px; */
    /*  */
    /* bottom: -50px; */
    top: 90px;
}

.carousel-slide-image-1::before {
    background-color: rgba(0, 0, 0, 0.0);
}

/* Pokusaj videa da se pozicionira */
.intro-video {
    position: relative;
    display: block;
    width: 100%;
}

.intro-video video {
    position: absolute;
    width: 100%;
}


/* .intro-video-1 {
    position: relative;
    display: block;
    width: 100%;
}

.intro-video-1 video {
    position: absolute;
    width: 100%;
} */
 

.carousel-slide-image-2 {
    filter: blur(2px);
    /* Kad je slika onda ide ova pozicija */
    top: -100px;
    /*  */

}

.carousel-slide-image-2::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel-slide-image-3 {
    /* Kad je slika onda ide ova pozicija */
    /* top: -130px; */
    /*  */
    /* filter: blur(0.5px); */
    top: 90px;
}


/* .intro-video-3 {
    position: relative;
    display: block;
    width: 100%;
}

.intro-video-3 video {
    position: absolute;
    width: 100%;
} */


.carousel-slide-image-3::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel-slide-image-4 {
    /* Kad je slika onda ide ova pozicija */
    /* top: -250px; */
    /*  */
    /* filter: blur(2px); */
    top: 90px;
}


/* .intro-video-4 {
    position: relative;
    display: block;
    width: 100%;
}

.intro-video-4 video {
    position: absolute;
    width: 100%;
} */


.carousel-slide-image-4::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel-slide-text {
    position: absolute;
    width: 80%;
    /* top: 55%; */
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-slide-text h2 span {
    text-align: center;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 40px;
    font-weight: 700;
    color: var(--advanced-machines-color);
    margin-bottom: 55px;
    text-shadow: 2px 2px 6px rgb(0,0,0);
    line-height: 60px;
}

.carousel-slide-text p span {
    text-align: center;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 20px;
    font-weight: 700;
    color: var(--advanced-machines-color);
    line-height: 1.6;
    text-shadow: 2px 2px 6px rgb(0,0,0);
}

.margin-bot-txt {
    margin-bottom: 55px;
}


    @media (max-width: 1350px) {
        .margin-bot-txt {
            margin-bottom: 35px;
        } 
    }

    @media (max-width: 1000px) {
        .margin-bot-txt {
            margin-bottom: 10px;
        } 
    }



.carousel-nav-container {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    display: flex;
    justify-content: space-between;
    /* background-color: #5167af; */
}

.carousel-nav {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    z-index: 1;
    background-color: rgba(160, 160, 160, 0.8);
    transition: .5s;
}

.carousel-nav-container .current-slide {
    background-color: rgba(0, 128, 255, 1);
}

.carousel-nav:hover {
    background-color: rgb(0, 128, 255);
    cursor: pointer;
}


@media (max-width: 1600px) {

    /* .carousel {
        height: 650px;
    } */

    .carousel-slide-image-1 {
        /* bottom: -100px; */
        top: 90px;
    }

    .carousel-slide-image-3 {
        /* bottom: -100px; */
        top: 90px;
    }

    .carousel-slide-image-4 {
        /* top: -150px; */
        top: 90px;
    }

    /* .carousel-slide-text {
        top: 35%;
    } */

}

@media (max-width: 1420px) {

    .carousel-slide-image-1 {
        /* bottom: -100px; */
        top: 90px;
    }

    .carousel-slide-image-3 {
        top: 90px;

    }

    .carousel-slide-image-4 {
        top: 90px;
    }

}

@media (max-width: 1350px) {

    .carousel {
        height: 650px;
    }

    .carousel-slide-text {
        top: 30%;
    }

    .carousel-slide-image-1 {
        top: 90px;
    }

    /* .carousel-slide-image-2 {
        top: 0px;
    } */

    .carousel-slide-image-3 {
        top: 90px;
    }

    .carousel-slide-image-4 {
        top: 90px;
    }

    .carousel-slide-text h2 span {
        font-size: 35px;
        margin-bottom: 35px;
    }
    
    .carousel-slide-text p span {
        font-size: 20px;
    }

}

@media (max-width: 1000px) {

    .carousel {
        height: 300px;
    }

    .carousel-slide-text {
        top: 100px;
    }

    .carousel-slide-text h2 span {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 20px;
    }
    
    .carousel-slide-text p span {
        font-size: 10px;
    }

    .carousel-slide-image-3 {
        top: 60px;
    }

    .carousel-slide-image-1 {
        /* bottom: 0px; */
        top: 60px;
    }

    .carousel-slide-image-4 {
        top: 60px;
    }

    .carousel-nav-container {
        width: 120px;
        bottom: 30px;
        display: flex;
    }
    
    .carousel-nav {
        width: 10px;
        height: 10px;
    }

    #carousel-prev-button {
        left: 5px;
    }
    
    #carousel-next-button {
        right: 5px;
    }

}

@media (max-width: 500px) {

    .carousel {
        height: 250px;
    }

    .carousel-slide-text {
        top: 90px;
    }

    .carousel-slide-text h2 span {
        margin-bottom: 10px;
        line-height: 20px;
    }

    .carousel-slide-image-1 {
        top: 60px;
    }

    .carousel-slide-image-2 {
        top: 60px;
    }

    .carousel-slide-image-3 {
        top: 60px;
    }

    .carousel-slide-image-4 {
        /* Sa slikom */
        /* top: 20px; */
        /*  */
        top: 60px;
    }

    .carousel-nav-container {
        bottom: 25px;
        width: 120px;
    }

}


/* ----------------------------- END CAROUSEL ------------------------------ */





/* ---------- PROBA 1 CAROUSEL ---------- */

.carousel2 {
    position: relative;
    /* height: 930px; */
    height: 650px;
    overflow: hidden;
    margin-top: -150px;
}

.carousel2-button {
    width: 30px;
    z-index: 1;
    border: none;
    background-color: transparent;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
}

#carousel2-prev-button {
    left: 30px;
}

#carousel2-next-button {
    right: 30px;
}

.carousel2-track {
    position: relative;
    /* height: 100%; */
    transition: .5s ease-in;
}

.carousel2-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* max-height: 800px; */
    height: 800px;
    transition: 1s;
}

.carousel2-slide-image {
    position: relative;
}

.carousel2-slide-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carousel2-slide-image img {
    object-fit: center;
}

.carousel2-slide-image-1 {
    /* filter: blur(1px); */
    /* top: -100px; */
    bottom: 150px;
}

.carousel2-slide-image-1::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel2-slide-image-2 {
    filter: blur(2px);
    top: -100px;
}

.carousel2-slide-image-2::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel2-slide-image-3 {
    top: -130px;
    filter: blur(0.5px);
}

.carousel2-slide-image-3::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel2-slide-image-4 {
    top: -250px;
    filter: blur(2px);
}

.carousel2-slide-image-4::before {
    background-color: rgba(0, 0, 0, 0.1);
}

.carousel2-slide-text {
    position: absolute;
    width: 80%;
    /* top: 55%; */
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.carousel2-slide-text h2 span {
    text-align: center;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 40px;
    font-weight: 700;
    color: var(--advanced-machines-color);
    margin-bottom: 55px;
    text-shadow: 2px 2px 6px rgb(0,0,0);
    line-height: 60px;
}

.carousel2-slide-text p span {
    text-align: center;
    text-transform: uppercase;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 20px;
    font-weight: 700;
    color: var(--advanced-machines-color);
    line-height: 1.6;
    text-shadow: 2px 2px 6px rgb(0,0,0);
}

.margin-bot-txt {
    margin-bottom: 55px;
}


    @media (max-width: 1350px) {
        .margin-bot-txt {
            margin-bottom: 35px;
        } 
    }

    @media (max-width: 1000px) {
        .margin-bot-txt {
            margin-bottom: 10px;
        } 
    }



.carousel2-nav-container {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    display: flex;
    justify-content: space-between;
    /* background-color: #5167af; */
}

.carousel2-nav {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    z-index: 1;
    background-color: rgba(160, 160, 160, 0.8);
    transition: .5s;
}

.carousel2-nav-container .current-slide {
    background-color: rgba(0, 128, 255, 1);
}

.carousel2-nav:hover {
    background-color: rgb(0, 128, 255);
    cursor: pointer;
}


@media (max-width: 1600px) {

    /* .carousel2 {
        height: 650px;
    } */

    .carousel2-slide-image-4 {
        top: -150px;
    }

    /* .carousel2-slide-text {
        top: 35%;
    } */

}

@media (max-width: 1420px) {

    .carousel2-slide-image-3 {
        top: 0px;
    }

    .carousel2-slide-image-4 {
        top: -50px;
    }

}

@media (max-width: 1350px) {

    .carousel2 {
        height: 650px;
    }

    .carousel2-slide-text {
        top: 30%;
    }

    .carousel2-slide-image-1 {
        /* top: -50px; */
        bottom: 50px;
    }

    .carousel2-slide-image-2 {
        top: 0px;
    }

    .carousel2-slide-image-3 {
        top: 0px;
    }

    .carousel2-slide-image-4 {
        top: -50px;
    }

    .carousel2-slide-text h2 span {
        font-size: 35px;
        margin-bottom: 35px;
    }
    
    .carousel2-slide-text p span {
        font-size: 20px;
    }

}

@media (max-width: 1000px) {

    .carousel2 {
        height: 300px;
    }

    .carousel2-slide-text {
        top: 100px;
    }

    .carousel2-slide-text h2 span {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 20px;
    }
    
    .carousel2-slide-text p span {
        font-size: 10px;
    }

    /* .carousel2-slide-image-3 {
        top: -30px;
    } */

    .carousel2-slide-image-4 {
        top: 0px;
    }

    .carousel2-nav-container {
        width: 120px;
        bottom: 30px;
        display: flex;
    }
    
    .carousel2-nav {
        width: 10px;
        height: 10px;
    }

    #carousel2-prev-button {
        left: 5px;
    }
    
    #carousel2-next-button {
        right: 5px;
    }

}

@media (max-width: 500px) {

    .carousel2 {
        height: 250px;
    }

    .carousel2-slide-text {
        top: 90px;
    }

    .carousel2-slide-text h2 span {
        margin-bottom: 10px;
        line-height: 20px;
    }

    .carousel2-slide-image-1 {
        top: 50px;
    }

    .carousel2-slide-image-2 {
        top: 65px;
    }

    .carousel2-slide-image-3 {
        top: 50px;
    }

    .carousel2-slide-image-4 {
        top: 20px;
    }

    .carousel2-nav-container {
        bottom: 25px;
        width: 120px;
    }

}

/* --------- KRAJ PROBA 1 CAROUSEL ------- */








/* ----------------------------- HOME BOXES ---------------------------- */

/* .home-boxes {
    width: 1220px;
    margin: 0 auto;
} */

/* .home-boxes-container {
    position: relative;
    padding: 50px 0;
    width: 1036.5px;
    margin: 0 auto;
} */

.home-boxes-container-opseg {
    position: relative;
    top: -70px;
    background-color: white;
    margin: 30px 0;
    box-shadow: 0px 0px 12px rgba(150,150,150);
    /* z-index: 1; */
}

.home-boxes-container-prednosti {
    position: relative;
    padding: 50px 0;
    background-color: white;
    box-shadow: 0px 0px 12px rgba(150,150,150);
    width: 100%;
    /* height: 500px; */
}

.home-box-down {
    display: flex;
    justify-content: space-between;
    padding: 50px;
}

/* blue box */
.home-box-blue {
    background-color: var(--blue-logo-color);
    /* width: 140px; */
    /* width: var(--blue-box-width); */
    width: 112px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

/* .home-box-text { */
    /* background: transparent; */
    /* width: calc(100% - var(--blue-box-width)); */
    /* width: calc(100% - 112px); */
    /* text-shadow: 1px 1px 4px rgb(200, 200, 200); */
/* } */


/* home box opseg */

.home-boxes-opseg {
    width: 950px;
    margin: 0 auto;
    background-color: var(--light-background-color2);
    /* background-color: var(--footer-bg-color); */
}

.home-box-title-opseg {
    /* background-color: var(--blue-logo-color); */
    padding: 10px 0;
    text-align: center;
}

.home-box-title-opseg h2 span {
    font-size: 30px;
    /* font-family: "Arial Black", Arial, Helvetica, sans-serif; */
    text-transform: uppercase;
}

.home-box-text-opseg p {
    font-size: 30px;
    line-height: 1.5;
    color: var(--gray-logo-color);
    position: relative;
    top: -3px;
    /* color: var(--txt-color-primary); */
    /* padding-left: 18px; */

    text-align: right;
    /* text-transform: uppercase; */
    font-weight: 400;
}

@media (max-width: 1300px) {

    .home-boxes-opseg {
        width: 810px;
    }

    .home-box-text-opseg p {
        font-size: 25px;
        top: -3px;
    }

}

@media (max-width: 1000px) {

    .home-boxes-opseg {
        /* width: 100%; */
        width: 340px;
    }

    .home-boxes-container-opseg {
        top: -20px;
        margin: 0px 0 20px;
    }

    .home-box-down {
        /* justify-content: space-between; */
        justify-content: center;
        padding: 20px 10px;
    }

    .home-box-text-opseg p {
        font-size: var(--mobile-font-size);
        top: -3px;
    }

    /* blue box */
    .home-box-blue {
        width: 40px;
        margin-right: 10px;
    }

}

@media (max-width: 500px) {
    .home-boxes-container-opseg {
        top: -15px;
        margin: 0px 0 10px;
    }
}

/* end home box opseg */


.home-boxes-title {
    font-size: 32.5px;
    text-transform: uppercase;
    color: var(--gray-logo-color);
    margin-bottom: 30px;
    /* font-weight: 400; */
}

@media (max-width: 1300px) {
    .home-boxes-title {
        font-size: 25px;
    }
}

@media (max-width: 1000px) {
    .home-boxes-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
}



/* ------ home-adventages ------ */
.home-adventages {
    background-color: white;
    /* background-color: var(--light-background-color2); */

    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.home-adventages-container {
    width: 1180px;
    margin: 0 auto;
    padding: 50px 20px;
    /* background-color: #5167af; */
}

.home-adventages-title {
    padding-left: 40px;
}

.home-adventages p {
    font-size: 20px;
    line-height: 1;
    color: var(--gray-logo-color);
    /* color: var(--txt-color-primary); */
    /* background-color: blanchedalmond; */
    /* text-transform: uppercase; */
    font-weight: 400;
}

/* PLAVI KVADRATICI ISPRED TEKSTA */
.home-adventages p::before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: var(--blue-logo-color);
    margin-right: 20px;
    position: relative;
    top: 3px;
}

@media (max-width: 1300px) {

    .home-adventages-container {
        width: 900px;
    }

    .home-adventages-title {
        padding-left: 30px;
    }

    .home-adventages p {
        font-size: 15px;
    }

    /* PLAVI KVADRATICI ISPRED TEKSTA */
    .home-adventages p::before {
        height: 15px;
        width: 15px;
        margin-right: 15px;
        /* top: 3px; */
    }

}

@media (max-width: 1000px) {

    .home-adventages-container {
        width: 300px;
    }

    .home-adventages-title {
        padding-left: 25px;
    }

    .home-adventages p {
        font-size: 12px;
        line-height: 1.5;
    }

    /* PLAVI KVADRATICI ISPRED TEKSTA */
    .home-adventages p::before {
        height: 15px;
        width: 15px;
        margin-right: 10px;
        /* top: 3px; */
    }

}





/* home box contact */

.home-boxes-contact {
    /* background-color: var(--txt-color-light); */
    /* background-color: var(--footer-bg-color); */
    /* background-color: var(--home-boxes-dark-background); */
    background-color: var(--light-background-color2);
    /* background-image: url(../img/Walpaper/8iclzY.jpg); */
    /* background-size: cover; */
}

.home-box-title-contact {
    padding: 10px 0;
    text-align: center;
}

.home-box-title-contact h2 span {
    font-size: 32.5px;
    text-transform: uppercase;
}

.home-box-text-contact p {
    font-size: 20px;
    line-height: 1.5;
    color: var(--gray-logo-color);
    /* color: var(--advanced-machines-color); */
    /* color: var(--txt-color-primary); */
    padding-left: 18px;
    /* text-transform: uppercase; */
    font-weight: 400;
}

/* end home box contact */


/* home box prednosti */

.home-boxes-prednosti {
    /* background-color: transparent; */
    
    position: relative;
    /* background-image: url("../img/viber\ slike\ NOVE/slika\ 3.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat; */
    /* TRUMPH */
    /* background-color: rgb(234,237,242); */
    background-color: var(--light-background-color2);

}

/* .home-boxes-prednosti::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(201, 201, 201, 0.8);
} */

.home-box-title-prednosti {
    padding: 10px 0 30px;
    /* text-align: center; */
    /* padding-left: 156px; */
    /* background-color: #5167af; */
    padding-left: 85px;
    /* width: 1200px; */
    max-width: 1200px;
    margin: 0 auto;
    /* text-shadow: 1px 1px 2px rgba(37,37,37,0.5); */
}

/* .home-box-title-prednosti h2 span {
    font-size: 32.5px;
    text-transform: uppercase;
    color: var(--gray-logo-color);
} */



.home-box-text-prednosti p {
    font-size: 20px;
    line-height: 1;
    color: var(--gray-logo-color);
    /* color: var(--txt-color-primary); */
    padding-left: 18px;
    /* background-color: blanchedalmond; */
    /* text-transform: uppercase; */
    font-weight: 400;
}

/* PLAVI KVADRATICI ISPRED TEKSTA */
.home-box-text-prednosti p::before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: var(--blue-logo-color);
    margin-right: 20px;
    position: relative;
    top: 3px;
}

.home-box-down-prednosti {
    width: 1200px;
    margin: 0 auto;
    padding-left: 30px;

    /* display: flex; */
    /* justify-content: space-between; */
}

@media (max-width: 1300px) {

    .home-box-down-prednosti {
        max-width: 1200px;
    }

    .home-box-text-prednosti p {
        font-size: 15px;
    }

    /* PLAVI KVADRATICI ISPRED TEKSTA */
    .home-box-text-prednosti p::before {
        height: 15px;
        width: 15px;
        /* top: 3px; */
    }

}


/* end home box prednosti */


/* home box references */

.home-boxes-references {
    background-color: transparent;
    /* background-color: var(--home-boxes-dark-background); */
}

.home-box-title-references {
    padding: 10px 0;
    /* text-align: center; */
    padding-left: 156px;
}

.home-box-title-references h2 span {
    font-size: 32.5px;
    text-transform: uppercase;
}

.home-box-text-references p {
    font-size: 20px;
    line-height: 1.5;
    color: var(--gray-logo-color);
    /* color: var(--advanced-machines-color); */
    /* color: var(--txt-color-primary); */
    padding-left: 18px;
    /* text-transform: uppercase; */
    font-weight: 400;
}

/* .home-box-text-references p::before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: var(--blue-logo-color);
} */

/* end home box references */




/* --------------------------- END HOME BOXES ----------------------------- */


/* ----- HOME REFERENCES ------ */

/* .home-references {
    background-color: white;
    box-shadow: 0px 0px 12px rgba(150,150,150);
} */

/* .home-references-title {
    background-color: white;
} */

.project--title h2 {
    text-align: center;
    width: 100%;
    color: var(--gray-logo-color);
    padding: 10px 0;
    /* text-transform: uppercase; */
    font-weight: 400;
    position: relative;
}

.project--title h2 span {
margin: 80px auto 0px;
font-size: 35px;
}






.home-references-title h2 {
        text-align: center;
        width: 100%;
        color: var(--gray-logo-color);
        padding: 10px 0;
        /* text-transform: uppercase; */
        font-weight: 400;
        position: relative;
}

.home-references-title h2 span {
    margin: 80px auto 50px;
    font-size: 35px;
}

.home-references-boxes {
    display: flex;
    justify-content: center;
    /* margin-top: 50px; */
    /* padding-bottom: 50px; */
    padding-bottom: 100px;
}

.home-references-box {
    width: 400px;
    position: relative;
    margin: 0 30px;
    cursor: pointer;
}

.home-references-box img {
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
}

.home-references-box img:hover {
    transform: scale(1.05);
}

/* .home-references-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: .5s;
} */

/* .home-references-box:hover::before {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 12px rgba(150,150,150);
} */

.home-references-description {
    padding: 20px;
}

.home-references-description h6 {
    font-size: 20px;
    color: var(--gray-logo-color);
    margin-bottom: 10px;
}

.home-references-description p {
    font-size: 16px;
    color: var(--gray-logo-color);
}

.home-references-text {
    text-align: center;
    font-size: 20px;
    color: var(--gray-logo-color);
    padding-bottom: 50px;
}

@media (max-width: 1000px) {

    .home-references-boxes {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }

    .home-references-box {
        margin: 0;
        margin-bottom: 20px;
        width: 90%;
    }

    .home-references-box:last-child {
        margin-bottom: 0;
    }

    .home-references-box::before {
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 12px rgba(150,150,150);
    }

    .home-references-title h2 span {
        margin: 20px 0 10px;
        font-size: 25px;
    }

    .home-references-description h6 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .home-references-description p {
        font-size: 12px;
        line-height: 1.5;
    }
    
    .home-references-text {
        text-align: center;
        font-size: 14px;
        padding-top: 40px;
        padding-bottom: 20px;
    }

}

@media (max-width: 500px) {

    .home-references-box img {
        height: 200px;
        object-fit: cover;
    }

}

/* -------------- END HOME REFERENCES -------------- */








/* -------- IMAGE SLIDER --------- */

.img-slider-container {
    position: relative;
    padding-top: 100px;
    /* background-color: seagreen; */
}

.img-slider figure {
    position: relative;
    width: 70%;
    margin: 0 auto;
}

.img-slider figure h2 {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: khaki; */
    width: 700px;
    text-align: center;  
    font-size: 35px;
    color: var(--txt-color-light);
    background-color: rgba(70, 81, 100, 0.5);
    border-radius: 20px;
    padding: 20px 30px;
    text-shadow: 3px 3px 10px #5167af;
}

.img-slider figure h2 span {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    cursor: pointer;
    z-index: 1000;
    opacity: .5;
    /* background-color: yellow; */
    /* box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.8); */
}

#left-arrow {
    left: 15px;
}

#right-arrow {
    right: 15px;
}

.dots-nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    padding: 20px 50px;
    /* background-color: yellowgreen; */
    display: flex;
    justify-content: space-between;
}

.dot {
    padding: 5px;
    /* border: 2px solid var(--blue-logo-color); */
    /* border: 2px solid var(--footer-bg-color); */
    background-color: var(--navbar-bg-color);
    border-radius: 100%;
    width: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.dot:first-child {
    background-color: var(--blue-logo-color);
}

/* --- image slider animation --- */

    .slider-img-animation{  
        animation-name: img-zoom;
        animation-duration: 0.6s;
    }

    @keyframes img-zoom {
        from {transform: scale(0.3)} 
        to {transform: scale(1)}
    }

    .img-slider figure h2 {
        animation-name: img-opacity;
        animation-duration: 1.5s;
        /* animation-delay: 0.6s; */
    }

    @keyframes img-opacity {
        from { opacity: 0; font-size: 1px; width: 10px;}
        to { opacity: 1; font-size: 35px; width: 700px;}
    }

/* --- end image slider animation --- */


@media (min-width: 650px) {
    .dot:hover {
        background-color: var(--blue-logo-color);
    }
}

/* END IMAGE SLIDER DESKTOP */

/* IMAGE SLIDER TABLET */

@media (max-width: 1300px) {

    .img-slider figure h2 {
        font-size: 20px;
        width: 400px;
        top: 50%;
        /* left: 50%; */
        /* transform: translateY(-50%); */
        transform: translateX(-50%);
    }

    .arrow {
        width: 30px;
        top: 60%;
        /* background-color: rgba(180, 180, 180, 0.1); */
        border-radius: 10px;
    }

    #left-arrow {
        left: 10px;
    }

    @keyframes img-opacity {
        from { opacity: 0; font-size: 5px; width: 50px;}
        to { opacity: 1; font-size: 20px; width: 400px;}
    }

}

/* END IMAGE SLIDER TABLET */


/* IMAGE SLIDER MOBILE */

@media (max-width: 1000px) {

    .img-slider-container {
        padding-top: 30px;
        padding-bottom: 40px;
        /* background-color: seagreen; */
    }

    .img-slider figure h2 {
        font-size: 13px;
        width: 220px;
        top: 50%;
        left: 50%;
        transform: translateY(-50%);
        transform: translateX(-50%);
        padding: 10px 20px;
    }


    @keyframes img-opacity {
        from { opacity: 0; font-size: 1px; width: 10px;}
        to { opacity: 1; font-size: 13px; width: 220px;}
    }
    
}

/* END IMAGE SLIDER MOBILE */



/* -------------------------------------------- */

/* DESCRIPTION TEXT */

.description-txt-section {
    /* background: linear-gradient(to right, var(--blue-logo-color) 50%, var(--navbar-bg-color) 50%); */
    background-color:var(--advanced-machines-bg-color);
}

.description-txt {
    /* background-color: var(--navbar-bg-color); */
    padding: 12px 0;
}

.description-txt h3 {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    color: var(--txt-color-light);
    font-size: 20px;
    padding-bottom: 5px;
}

.description-txt p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: var(--txt-color-light);
    font-size: 18px;
}

/* DESCRIPTION TEXT MOBILE */

@media (max-width: 1000px) {

    .description-txt h3 {
        font-size: 12px;
        padding-bottom: 5px;
    }

    .description-txt p {
        font-size: 9px;
    }

}

/* END DESCRIPTION TEXT MOBILE */



/* MAP */

/* ---------------------------------- */

.map iframe {
    width: 100%;
    height: 400px;
}

/* --------------------------------------- */



/* -------- FOOTER ---------- */

footer {
    position: relative;
    /* height: 200px; */
    /* background-color: var(--footer-bg-color); */
    background-image: url("../img/Walpaper/minimalist-black-pattern-wqhd-1440p-wallpaper.jpg");
    background-repeat: no-repeat;
    /* background-size: cover; */
}

footer .copyright {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
}

footer .copyright p {
    text-align: center;
    color: var(--txt-color-light);
    font-size: 11px;
}

.above-copy {
    display: flex;
    justify-content: space-between;
    /* align-items: flex-start; */
    align-items: flex-end;
    /* align-items: center; */
    /* justify-content: space-around; */
    padding-top: 30px;
    padding-bottom: 20px;
}

.above-copy h3 {
    color: var(--advanced-machines-color);
    font-size: 25px;
}

.footer-logo {
    /* width: 220px; */
    text-align: right;
    margin-top: -12px;
    margin-bottom: 25px;
    /* background-color: yellowgreen; */
}

.footer-logo h2 a span {
    font-family: "Arial-Black", "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 31px;
}

.footer-logo p {
    font-family: "Arial-Black", "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 15px;
    /* line-height: .7; */
    margin-top: -8px;
    color: var(--advanced-machines-color);
}

.footer-navbar a {
    color: var(--gray-logo-color);
    /* line-height: 1.5rem; */
    line-height: 1.5;
}

.footer-navbar a span {
    font-size: 15px;
}

.footer-contact-us{
    color: var(--gray-logo-color);
    /* background-color: yellowgreen; */
    text-align: right;
}

.footer-contact-us ul li {
    margin: 5px 0;
    font-size: 12px;
}

.footer-contact-us ul li:nth-child(4) {
    margin-bottom: 15px;
    /* background-color: chartreuse; */
}

.quick-links {
    /* background-color: yellowgreen; */
    /* margin-bottom: 25px; */
    /* width: 350px; */
    width: 250px;
}

.quick-links .footer-navbar {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.quick-links .footer-navbar li a {
    margin: 0 15px 10px 0;
    font-size: 15px;
    font-weight: 400;
    transition: .5s;
    text-transform: uppercase;
}

@media (min-width: 1001px) {
    .quick-links .footer-navbar li a:hover {
        color: var(--blue-logo-color);
    }
}

.above-copy form {
    /* margin-top: 20px; */
    margin-bottom: 10px;
}

.above-copy form input {
    width: 240px;
    padding: 7px 3px;
    border: 1px solid var(--footer-bg-color);
    border-radius: 5px;
    font-size: 15px;
    background-color: var(--advanced-machines-bg-color);
    color: var(--advanced-machines-color);
}

.above-copy form input::placeholder {
    color: var(--txt-color-light);
}

#footer-submit {
    width: 80px;
    padding: 7px 3px;
    text-align: center;
    border: 1px solid var(--footer-bg-color);
    border-radius: 5px;
    font-size: 15px;
    background-color: var(--blue-logo-color);
    color: var(--txt-color-light);
    cursor: pointer;
    transition: .5s;
}

@media (min-width: 1001px) {
    #footer-submit:hover {
        background-color: rgb(0, 100, 200);
    }
}

.copyright-container {
    border-top: 1px solid var(--gray-logo-color);
}

.copyright-list {
    display: flex;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;
    /* background-color: #5167af; */
}

.copyright-list li {
    color: var(--gray-logo-color);
    /* font-size: 12px; */
    /* margin-right: 30px; */
}

.copyright-list li:first-child {
    margin-right: 30px;
}

/* END DESKTOP FOOTER */


/* ------- TABLET FOOTER --------- */
@media (max-width: 1280px) {

    .footer-logo {
        margin-top: -7px;
    }

    .above-copy form input {
        font-size: var(--tablet-font-size);
    }
    
    #footer-submit {
        width: 70px;
        font-size: var(--tablet-font-size);
    }

    .footer-navbar a span {
        font-size: var(--tablet-font-size);
    }

    .above-copy h3 {
        color: var(--advanced-machines-color);
        font-weight: 400;
        font-size: 22px;
        padding-bottom: 4px;
    }

    .footer-contact-us{
        font-size: var(--tablet-font-size);
    }

    .copyright-list {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .copyright-list li {
        font-size: var(--tablet-font-size);
    }

}

/* END TABLET FOOTER */


/* -------- MOBILE FOOTER -------- */
@media (max-width: 600px) {

    .above-copy {
        flex-direction: column;
        align-items: center;
        padding-bottom: 30px;
    }
    
    .above-copy h3 {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .quick-links .footer-navbar li a {
        margin: 0 15px 0 0;
    }

    /* .footer-navbar a span {
        font-size: 12px;
    } */

    footer .copyright p {
        font-size: 9px;
    }

    .footer-logo h2 a span {
        font-size: 25px;
    }
    
    .footer-logo p {
        font-size: 12.5px;
    }

    .quick-links {
        /* width: 260px; */
        width: 290px;
    }

    .footer-contact-us{
        /* width: 260px; */
        width: 290px;
    }

    .above-copy form {
        width: 290px;
        /* width: 100%; */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    .above-copy form input {
        width: 100%;
        margin-bottom: 5px;
        padding: 7px 10px;
        border-radius: 5px;
        font-size: 12px;
    }

    .quick-links form input::placeholder {
        text-align: center;
    }

    #footer-submit {
        width: 100%;
        font-size: 12px;
    }

}
/* END MOBILE FOOTER */

/* -------------------------------------- */

/* --- NEWS2 --- */

/* News2 */

.news2 {
    position: relative;
    /* color: var(--gray-logo-color); */
}

.news2-image {
    margin: 50px 0;
    /* background-color: azure; */
}

.news2-container {
    position: absolute;
    /* background-color: aqua; */
    /* top: 50px; */
    width: 1240px;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.news2-title {
    background-color: white;
    color: var(--gray-logo-color);
    font-size: 35px;
    padding: 10px 0;
    text-align: center;
    font-weight: 400;
    margin-bottom: 30px;
    box-shadow: 0px 0px 12px 1px rgba(200, 200, 200, 0.8);
    opacity: 0.8;
}


/* START Namesteno da Novosti bude levo iznad teksa */
/* .news2-title {
    width: 200px;
    color: var(--txt-color-primary);
    font-size: 35px;
    padding: 10px 40px;
    font-weight: 400;
    margin-bottom: 10px;
} */
/* END Namesteno da Novosti bude levo iznad teksa */

.white-background {
    background-color: white;
}

.box-shadow-1 {
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.box-shadow-2 {
    box-shadow: 0px 0px 5px rgba(150,150,150);
}

.news2-box-container {
    display: flex;
    /* justify-content: space-evenly; */
    justify-content: space-between;
}

.news2-box {
    padding: 40px;
    width: 600px;
    height: 200px;
    box-shadow: 0px 0px 12px 1px rgba(200, 200, 200, 0.8);
    background-color: white;
    position: relative;
    opacity: 0.8;
}

.news2-box .news2-date {
    margin-bottom: 10px;
    color: var(--gray-logo-color);
}

.news2-button {
    width: 45px;
    height: 45px;
    border: 1px solid var(--gray-logo-color);
    color: var(--gray-logo-color);
    font-size: 30px;
    position: relative;
    cursor: pointer;
    transition: .4s;

    position: absolute;
    bottom: 20px;
    right: 20px;
}

.news2-button a {
    color: var(--gray-logo-color);
}

.news2-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.news2-button:hover {
    border: 1px solid var(--blue-logo-color);
    color: var(--txt-color-light);
    background-color: var(--blue-logo-color);
}

.news2-box h4 {
    margin-bottom: 30px;
    color: var(--gray-logo-color);
}

.news2-box p {
    color: var(--gray-logo-color);
}

@media (max-width: 1400px) {

    .news2-container {
        width: 600px;
        /* top: 50px; */
        bottom: 50px;
    }

    .news2-title {
        margin-bottom: 20px;
    }

    .news2-box-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .news2-box:first-child {
        margin-bottom: 20px;
    }

}

@media (max-width: 1150px) {

    .news2-image {
        margin: 10px;
        /* background-color: azure; */
    }

    .news2-container {
        bottom: 20px;
    }

}

@media (max-width: 1000px) {

    .news2 {
        background-color: aqua;
        padding: 50px 0;
        background-image: url('../img/Advenmach\ slike\ s\ puta/123123.jpg');
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .news2-image {
        display: none;
    }

    .news2-container {
        position: relative;
        /* margin-top: 50px; */
        /* background-color: aqua; */
        bottom: 0px;
    }

    .news2-title {
        font-size: 25px;
    }

    .news2-box {
        padding: 20px;
        width: 100%;
        height: 180px;
        box-shadow: 0px 0px 12px 1px rgba(200, 200, 200, 0.8);
        background-color: white;
        position: relative;
        opacity: 0.8;
    }

    .news2-box p {
        font-size: 12px;
        line-height: 1.5;
    }

    .news2-box h4 {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .news2-button {
        width: 30px;
        height: 30px;
    }

    .news2-button span {
        font-size: 17px;
    }
}

@media (max-width: 700px) {

    .news2-container {
        width: 90%;
        /* top: 50px; */
        bottom: 0px;
    }

    .news2-title {
        margin-top: 0px;
    }

    .news2-button {
        bottom: 8px;
        right: 8px;
    }

}

/* --- END NEWS2 --- */


/* REFERENCES */
/* START References page EDIT */

.background-image-references {
    /* background-image: url("../img/MZMU/Skracena\ sa\ perspektivom\ 1800\ 529.png"); */
    background-image: url("../img/razno/support\ 4\ 1280x557.jpg");
    background-position-y: -40px;
    filter: blur(2px);
}

@media (max-width: 700px) {

    .background-image-references {
        background-position-y: 0px;
    }

}

.references-page-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* margin-top: 50px; */
    /* padding-bottom: 50px; */
    padding-top: 60px;
    padding-bottom: 0px;
    /* padding-left: 100px;
    padding-right: 100px; */
}

.references-page-box {
    width: 450px;
    position: relative;
    margin: 0 30px 60px;
    cursor: pointer;
}

.references-page-box img {
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
}

.references-page-box img:hover {
    transform: scale(1.1);
}

/* .references-page-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: .5s;
} */

/* .references-page-box:hover::before {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 12px rgba(150,150,150);
} */

.references-box-description {
    padding: 20px;
}

.references-box-description h6 {
    font-size: 20px;
    color: var(--gray-logo-color);
    margin-bottom: 10px;
}

.references-box-description p {
    font-size: 16px;
    color: var(--gray-logo-color);
}



@media (max-width: 1000px) {

    .references-page-container {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        padding-bottom: 30px;
    }

    .references-page-box {
        margin: 0;
        margin-bottom: 20px;
        width: 90%;
    }

    .references-page-box:last-child {
        margin-bottom: 0;
    }

    .references-page-box::before {
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 12px rgba(150,150,150);
    }

    .references-box-description h6 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .references-box-description p {
        font-size: 12px;
        line-height: 1.5;
    }

}

@media (max-width: 500px) {

    .references-page-container {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .references-page-box img {
        height: 200px;
        object-fit: cover;
    }

}

/* END references page EDIT */
/* --------------------------------------- */


/* PROJECTS */
/* START Projects page EDIT */

.background-image-projects {
    /* background-image: url("../img/MZMU/Skracena\ sa\ perspektivom\ 1800\ 529.png"); */
    background-image: url("../img/razno/support\ 4\ 1280x557.jpg");
    background-position-y: -40px;
    filter: blur(2px);
}

@media (max-width: 700px) {

    .background-image-projects {
        background-position-y: 0px;
    }

}

.projects-page-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* margin-top: 50px; */
    /* padding-bottom: 50px; */
    padding-top: 60px;
    padding-bottom: 0px;
    /* padding-left: 100px;
    padding-right: 100px; */
}

.projects-page-box {
    width: 450px;
    position: relative;
    margin: 0 30px 60px;
    cursor: pointer;
}

.projects-page-box img {
    height: 300px;
    object-fit: cover;
    transition: 0.5s;
}

.projects-page-box img:hover {
    transform: scale(1.1);
}

/* .projects-page-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: .5s;
} */

/* .projects-page-box:hover::before {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 12px rgba(150,150,150);
} */

.projects-box-description {
    padding: 20px;
}

.projects-box-description h6 {
    font-size: 20px;
    color: var(--gray-logo-color);
    margin-bottom: 10px;
}

.projects-box-description p {
    font-size: 16px;
    color: var(--gray-logo-color);
}



@media (max-width: 1000px) {

    .projects-page-container {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        padding-bottom: 30px;
    }

    .projects-page-box {
        margin: 0;
        margin-bottom: 20px;
        width: 90%;
    }

    .projects-page-box:last-child {
        margin-bottom: 0;
    }

    .projects-page-box::before {
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 12px rgba(150,150,150);
    }

    .projects-box-description h6 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .projects-box-description p {
        font-size: 12px;
        line-height: 1.5;
    }

}

@media (max-width: 500px) {

    .projects-page-container {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .projects-page-box img {
        height: 200px;
        object-fit: cover;
    }

}

/* END Projects page EDIT */
/* --------------------------------------- */




/* --- START Project single --- */

.project-text-video {
    display: flow-root;
    padding-top: 170px;
    padding-bottom: 50px;
}

.project-video {
    position: relative;
    /* width: 50%; */
    width: 700px;
    /* min-height: 355px; */
    float: right;
    /* background-color: bisque; */
    margin-bottom: 10px;
    margin-left: 30px;
}

.project-heading-desktop {
    font-size: 28px;
    color: var(--txt-color-primary);
    padding-bottom: 30px;
}

.project-heading-mob {
    display: none;
}

.project-text-video p {
    color: var(--txt-color-box);
    /* color: var(--txt-color-primary); */
}

.project-picture-section {
    display: flex;
    /* justify-content: space-between; */
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* background-color: aqua; */
    margin-top: -20px;
    padding: 30px 0;
}

.project-picture-box {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 40px;
    /* width: 85%; */
    width: 30%;
}

@media (max-width: 1180px) {

    .project-heading-desktop {
        font-size: 24px;
        /* padding-bottom: 30px; */
    }

    .project-text-video p {
        font-size: 14px;
    }

}

@media (max-width: 1000px) {

    .project-heading-desktop {
        display: none;
    }

    .project-heading-mob {
        display: block;
        font-size: 20px;
        text-align: center;
        color: var(--txt-color-primary);
        padding-bottom: 30px;
    }

    .project-text-video {
        /* display: block; */
        padding-top: 90px;
        padding-bottom: 10px;
    }

    .project-video {
        position: relative;
        width: 100%;
        float: none;
        background-color: bisque;
        margin-bottom: 30px;
        margin-left: 0px;
    }

    .project-text-video p {
        font-size: var(--tablet-font-size);
    }

    .project-picture-section {
        /* justify-content: space-between; */
        /* flex-wrap: wrap; */
        /* background-color: aqua; */
        margin-top: -20px;
        padding: 30px 0;
        padding-bottom: 0px;
    }
    
    .project-picture-box {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
        /* width: 85%; */
        width: 100%;
    }

}

/* --- END Project single --- */




/* --- References single --- */

.reference-picture-section {
    display: flex;
    justify-content: space-between;
    /* background-color: aqua; */
    margin-top: -20px;
    padding: 30px 0;
}

.reference-picture-box {
    margin: 0 10px;
    width: 85%;
}


/* Ubacen video u referencama (sa servera ili youtube) */

.reference-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
    /* background-color: bisque; */
    margin-bottom: 30px;

    /* border: 1px solid rgb(37, 37, 37); */
    /* border-radius: 3px; */
}

.reference-video iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.reference-video video {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}



.reference-single-section {
    /* padding: 70px 20px 70px; */
    padding: 170px 20px 70px;
    min-height: 550px;
}

.reference-heading {
    color: var(--txt-color-primary);
    background-color: #5167af;
}

.reference-single-section img {
    /* width: 700px; */
    max-height: 400px;
    width: auto;
    float: right;
    margin-left: 50px;
    margin-bottom: 30px;
}

.reference-single-section p {
    color: var(--gray-logo-color);
    line-height: 1.6;
}

@media  (max-width: 1000px) {
    
    .references-list {
        font-size: 12px;
    }

    .reference-picture-section {
        flex-direction: column;
    }

    .reference-picture-box {
        padding-top: 10px;
        margin: 0 auto;
        width: 85%;
    }

    .reference-single-section {
        padding: 20px 0;
        min-height: 0px;
    }

    .reference-single-section img {
        width: 80%;
        float: none;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .reference-single-section p {
        font-size: 12px;
        padding: 0 20px;
    }

}


/* --- End References single --- */


/* ------ REFERENCES - ALZZK -------- */

.background-image-references-alzzk {
    background-image: url("../img/ALZZK/Layout\ TIKI.jpg");
    background-position-y: -60px;
    filter: blur(1px);
}

.background-image-references-alzzk::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

.references-list {
    padding: 20px 0;
}

.references-list li {
    list-style-type: disc;
    margin-left: 40px;
}

.references-list li a {
    padding: 5px 0;
    color: var(--advanced-machines-bg-color);
    cursor: auto;
    /* cursor: text; */
}

/* ------ REFERENCES - AZPK -------- */

.background-image-references-azpk {
    background-image: url("../img/AZPK/AZPK\ -\ pogled\ odozgo.jpg");
    background-position-y: -280px;
    filter: blur(1px);
}

.background-image-references-azpk::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-azpk {
        background-position: center;
    }

}


/* ------ END REFERENCES AZPK ------ */

/* --- Start REFERENCES RSZZS --- */

.background-image-references-rszzs {
    background-image: url("../img/RSZZS/RSZZS\ otvorena\ srednja\ kapija\ -\ 1800\ 1012.jpg");
    background-position-y: -280px;
    filter: blur(1px);
}

.background-image-references-rszzs::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-rszzs {
        background-position: center;
    }

}

/* --- END References RSZZS --- */


/* --- Start References LZU --- */

.background-image-references-lzu {
    background-image: url("../img/LZU1/LZU1\ -\ 2\ 1800\ 1012.jpg");
    background-position-y: -280px;
    filter: blur(1px);
}

.background-image-references-lzu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-lzu {
        background-position: center;
    }

}

/* --- END References LZU --- */


/* ------ START references - OS -------- */

.background-image-references-os {
    background-image: url("../img/obrtni\ sto/Slika 3 - 1800x1012.jpg");
    background-position-y: 30px;
    filter: blur(1px);
}

.background-image-references-os::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 500px) {

    .background-image-references-os {
        background-position-x: center;
        background-position-y: 50px;
    }

}


/* ------ START references - RT -------- */

.background-image-references-rt {
    background-image: url("../img/Render/Sina/Sklop\ velike\ i\ male\ sine\ -v2.jpg");
    background-position-y: -250px;
    filter: blur(1px);
}

.background-image-references-rt::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1700px) {

    .background-image-references-rt {
        background-position-x: center;
        background-position-y: -100px;
    }

}

@media (max-width: 1500px) {

    .background-image-references-rt {
        background-position-x: center;
        background-position-y: -50px;
    }

}

@media (max-width: 765px) {

    .background-image-references-rt {
        background-position-x: center;
        background-position-y: 0px;
    }

}

@media (max-width: 500px) {

    .background-image-references-rt {
        background-position-x: center;
        background-position-y: 10px;
    }

}

/* --- END References RT --- */


/* ---  --- */
/* --- Start REFERENCES SZVU --- */

.background-image-references-szvu {
    background-image: url("../img/SZVU/2.1.png");
    background-position-y: 0px;
    filter: blur(1px);
}

.background-image-references-szvu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-szvu {
        background-position: center;
    }

}

/* --- END References SZVU --- */
/* ---  --- */




/* ---  --- */
/* --- Start REFERENCES RZL --- */

.background-image-references-rzl {
    background-image: url("../img/RZL/3.jpg");
    background-position-y: -100px;
    filter: blur(1px);
}

.background-image-references-rzl::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-rzl {
        background-position: center;
        background-position-y: 20px;
    }

}

/* --- END References RZL --- */
/* ---  --- */



/* --- Start REFERENCES MZN --- */

.background-image-references-mzn {
    background-image: url("../img/MZN/1.1.png");
    background-position-y: -170px;
    filter: blur(1px);
}

.background-image-references-mzn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-mzn {
        background-position: center;
    }

}

/* --- END References MZN --- */


/* --- Start REFERENCES RSZD --- */

.background-image-references-rszd {
    background-image: url("../img/RSZD/1.png");
    background-position-y: -200px;
    filter: blur(1px);
}

.background-image-references-rszd::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* filter: blur(20px); */
}

@media (max-width: 1300px) {

    .background-image-references-rszd {
        background-position: center;
    }

}

/* --- END References RSZD --- */



/* ------------ SERVICES ------------- */


.background-image-services {
    background-image: url("../img/razno/support\ 3\ 1280x851.jpg");
    background-position-y: -500px;
    filter: blur(4px);
}

/* .background-image-services::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
} */

.serial-number {
    padding: 50px 0 150px;
    line-height: 1.4;
}

.ordered-list {
    list-style-type: decimal;
}

.services-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 0;
}

.services-text {
    width: 45%;
}

.services-image {
    width: 50%;
}

.cards {
    padding: 100px 0;
    background-color: var(--light-background-color);
}

.cards h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 400;
}

.cards-box {
    display: flex;
    justify-content: space-evenly;
}

.card {
    width: 30%;
}

.card img {
    height: 250px;
    overflow: hidden;
    object-fit: cover;
    border-radius: 15px;
}

.card-text {
    text-align: center;
    margin-top: 20px;
}

/* ------------ END SERVICES ----------------- */




/* --------------------------- PROJEKTOVANJE I IZRADA MAŠINA - Machine Design ------------------------ */

.background-image-project {
    /* background-image: url("../img/project/pexels-project2.jpg"); */
    /* background-position-y: -350px; */
    /* background-image: url("../img/project/pexels-project4.jpg"); */
    /* background-position-y: -250px; */
    /* background-image: url("../img/project/pexels-project3.jpg"); */
    /* background-position-y: -150px; */
    /* background-image: url("../img/project/pexels-project.jpg"); */
    /* background-image: url("../img/project/FTO2507\ -\ image3.jpg"); */
    background-image: url("../img/razno/auto\ 2500x961.jpg");
    background-position-y: 50px;
    filter: blur(2px);
}

.background-image-project::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    
}

.project-subtitle-section {
    position: relative;
    top: -30px;
    /* margin: 50px auto; */
    margin: 0px auto;
    /* width: 1000px; */
    max-width: 1000px;
    /* background-color: var(--light-background-color); */
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.project-subtitle h2 {
    font-size: 28px;
    color: var(--txt-color-box);
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
}

.project-subtitle p {
    margin-top: 30px;
    line-height: 1.6;
    text-align: center;
    color: var(--txt-color-box);
    font-size: 20px;
}



/* project boxes */

.project-boxes {
    padding-bottom: 50px;
}

.project-box-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.project-box {
    margin: 5px 0;
    flex-basis: 49%;
}

.project-box-title {
    position: relative;
    z-index: 1;
    top: 15px;
}

.project-box-title h3 {
    width: 400px;
    /* margin: 0 auto; */
    /* margin-left: 80px; */
    margin-left: 40px;
    padding: 20px 0;
    /* text-align: center; */
    padding-left: 40px;
    font-size: 20px;
    /* color: var(--blue-logo-color); */
    color: var(--advanced-machines-color);
    /* background-color: var(--footer-bg-color); */
    /* background-color: var(--blue-logo-color); */
    /* background-color: rgba(0, 128, 255, 0.7); */
    background-color: rgb(0, 128, 255);
}

.project-box-text {
    padding: 30px 35px;
    /* background-color: var(--light-background-color); */
    /* background-color: var(--light-background-color); */
    background-color: white;
    box-shadow: 0px 0px 12px rgba(150,150,150);
    /* height: 400px; */
    /* overflow: scroll; */
    overflow: auto;
}

.prljavo {
    background-color: var(--light-background-color2);
}

.project-box-text p {
    font-size: 15px;
    /* color: var(--txt-color-primary); */
    color: rgb(130, 130, 130);
    line-height: 1.6;
}

.project-link {
    display: inline;
    /* color: var(--footer-bg-color); */
    color: var(--blue-logo-color);
    /* text-decoration: underline; */
}

/* Engineering box DIAGRAM */
.diagram {
    margin-bottom: 50px;
}

.diagram-img {
    /* width: 80%; */
    width: 50%;
    margin: 0 auto;
    padding: 0 0 30px;
    position: relative;
    /* top: -50px; */
}

@media (max-width: 1400px) {

    .diagram-img {
        width: 60%;
    }

}

@media (max-width: 1000px) {

    .project-subtitle-section {
        width: 80%;
        padding: 20px 10px;
    }

    .project-subtitle h2 {
        font-size: 16px;
    }
    
    .project-subtitle p {
        margin-top: 30px;
        font-size: 12px;
    }
    
    .project-box {
        margin: 5px 0;
        flex-basis: 100%;
    }

    .project-box-title h3 {
        /* width: 400px; */
        width: 80%;
        margin-left: 40px;
        padding: 15px 0;
        padding-left: 40px;
        font-size: 16px;
    }

    .project-box-text p {
        font-size: 12px;
    }

    .diagram-img {
        width: 80%;
        padding: 0 0 20px;
    }
}

@media (max-width: 500px) {

    .project-box-title h3 {
        width: 80%;
        margin: 0 auto;
        padding: 15px 0;
        text-align: center;
    }

    .diagram-img {
        width: 95%;
        padding: 0 0 10px;
    }

}




/* --------------- */
.project-boxes-new {
    /* background-image: url("../img/project/project-papir.jpg"); */
    background-image: url("../img/project/pexels-project4.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding-bottom: 50px;
}

.project-box-text-new {
    background-color: rgba(230, 230, 230, 0.8);
}

.project-boxes-white {
    background-color: var(--light-background-color);
    padding-bottom: 50px;
}

.project-box-text-white {
    background-color: white;
}

/* ------------------------- END PROJEKTOVANJE I IZRADA MAŠINA - Machine Design ------------------------ */





/* --------------- START PRODUCTS -------------------- */

/* PRODUCTS */

.background-image-products {
    background-image: url("../img/Render/Mix\ za\ background\ 1.jpg");
    /* background-position-y: -280px; */
    background-position-y: center;
    background-position-x: center;
    /* filter: blur(1px); */
}

.background-image-products::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/* .robotics-subtitle-section {
    position: relative;
    top: -30px;
    margin: 0px auto;
    max-width: 1000px;
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.robotics-subtitle h2 {
    font-size: 25px;
    color: rgb(130, 130, 130);
    font-weight: 400;
    text-align: center;
} */


.product-description-container {
    position: relative;
    /* padding-top: 112px; */
    padding-top: 150px;
    padding-bottom: 10px;
    /* margin-top: 112px; */
    /* background-color: #5167af; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.product-description-container .product--title {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
    width: 100%;
}

.product-description-container .product--title h2 {
    font-size: 40px;
    color: var(--gray-logo-color);
    font-weight: 400;
    text-align: center;
}

.product-description-container > a {
    color: var(--txt-color-primary);
}

.product-description {
    position: relative;
    /* width: 22%; */
    width: 411px;
    /* height: 150px; */
    padding: 5px;
    margin-bottom: 25px;
    background-color: white;
    /* border: 4px solid rgba(140, 140, 140, 0.3); */
    transition: 0.5s;
}

.product-description-img {
    height: 150px;
    position: relative;
}

.product-description img {
    position: absolute;
    bottom: 5px;
    left: 10px;
    width: auto;
    /* height: 80%; */
    height: 130px;
}

@media (min-width: 1000px) {

    .product-description:hover {
        transform: scale(1.08);
    }

}

.product-description h3 {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    font-weight: 600;
    color: var(--blue-logo-color);
}

.product-description h2 {
    font-size: 18px;
    padding-left: 5px;
    /* text-align: center; */
    font-weight: 400;
    /* background-color: green; */
}

@media (max-width: 910px) {

    .product-description-container {
        padding-top: 120px;
        padding-bottom: 5px;
    }

    .product-description-container .product--title {
        top: 50px;
    }

    .product-description-container .product--title h2 {
        font-size: 22px;
    }

    .product-description {
        width: 320px;
        /* padding: 5px; */
        /* margin-bottom: 25px; */
        /* transition: 0s; */
    }

    .product-description-img {
        height: 110px;
    }
    
    .product-description img {
        /* bottom: 5px; */
        /* left: 10px; */
        height: 100px;
    }

    .product-description h3 {
        top: 3px;
        right: 8px;
        font-size: 20px;
    }
    
    .product-description h2 {
        font-size: 15px;
        padding-left: 5px;
        /* text-align: center; */
        font-weight: 400;
        /* background-color: green; */
    }

}

@media (max-width: 350px) {

    .product-description {
        width: 280px;
        /* padding: 5px; */
        /* margin-bottom: 25px; */
        /* transition: 0s; */
    }

    .product-description h2 {
        font-size: 13px;
    }

}







.products-subtitle-section {
    position: relative;
    top: -30px;
    /* margin: 50px auto; */
    margin: 0px auto;
    /* width: 1000px; */
    max-width: 1000px;
    /* background-color: var(--light-background-color); */
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.products-subtitle h2 {
    font-size: 25px;
    color: var(--txt-color-box);
    font-weight: 400;
    text-align: center;
}



.products-subtitle p {
    margin-top: 30px;
    line-height: 1.6;
    text-align: center;
    /* color: rgb(130, 130, 130); */
    color: var(--txt-color-box);
}



/* ------------------------- END PRODUCTS - Proizvodi ------------------------ */







/* AUTOMATION */
/* ---------------------------------------------------------------------------------------------------------- */
/* za sve background slike */
.background-image {
    position: relative;
    height: 500px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

/* dodajem providno preko slike */
/* .background-image::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
} */


.background-image-automation {
    /* background-image: url("../img/RSZZS/skraceno\ za\ cover\ automatizacije.png"); */
    /* background-image: url("../img/razno/auto\ 2500x961.jpg"); */
    /* background-image: url("../img/razno/PLC\ 2500x1666.jpg"); */
    background-image: url("../img/razno/Siemens\ Automatizacija.jpg");
    background-position-y: -230px;
    filter: blur(2px);
    /* backdrop-filter: blur(5px); */
}

.background-image-automation::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    
}

.background-blur {
    position: relative;
}

/* .background-image img {

} */

.automation-subtitle-section {
    position: relative;
    top: -30px;
    /* margin: 50px auto; */
    margin: 0px auto;
    /* width: 1000px; */
    max-width: 1000px;
    /* background-color: var(--light-background-color); */
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.automation-subtitle h2 {
    font-size: 25px;
    color: var(--txt-color-box);
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
}

/* .automation-subtitle p {
    margin-top: 30px;
    line-height: 1.6;
    text-align: center;
    color: rgb(130, 130, 130);
} */

.box-container {
    padding-top: 150px;
    padding-bottom: 100px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    align-items: flex-start;
    /* border-bottom: 1px solid var(--footer-bg-color); */
}

.box-container-2 {
    padding-top: 150px;
    padding-bottom: 100px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    align-items: flex-start;
    /* border-bottom: 1px solid var(--footer-bg-color); */
}

.box-text {
    width: 46%;
}

.box-text p {
    line-height: 1.6;
    /* color: var(--txt-color-primary); */
    color: var(--gray-logo-color);
}

.box-list {
    padding: 20px 30px;
    line-height: 1.6;
}

.box-list a {
    color: var(--txt-color-primary);
}

.box-image {
    position: relative;
    width: 50%;
}

.box-image-2 {
    position: relative;
    width: 50%;
}

.box-subtitle {
    text-align: center;
    /* padding: 20px 0 50px; */
    padding: 0px 0 50px;
    font-size: 30px;
    font-weight: 700;
    color: var(--blue-logo-color);
}

.box-text-bellow {
    line-height: 1.6;
    padding-top: 50px;
    padding-bottom: 50px;
}

.box-shadow {
    /* box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.7); */
    /* box-shadow: 0px 0px 25px 4px rgba(0,0,0,0.8); */
    box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.8);
    /* box-shadow: 0px 0px 10px -4px rgba(0,0,0,0.8); */
}

/* TABLET */

@media (max-width: 1300px) {
    
    .box-subtitle {
        padding: 0px 0 25px;
        font-size: 25px;
        font-weight: 700;
    }

    .box-container {
        padding-top: 70px;
        padding-bottom: 50px;
    }

    .box-container-2 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .box-text p {
        /* line-height: 1.6; */
        font-size: 14px;
    }

}

/* MOBILE */

@media (max-width: 1000px) {

    .box-container {
        flex-direction: column;
        padding-bottom: 30px;
    }

    .box-container-2 {
        flex-direction: column;
        padding-bottom: 30px;
    }

    .box-text {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 0px;
    }

    .box-text p {
        font-size: 12px;
    }

    .box-image {
        width: 100%;
    }

    .box-image-2 {
        width: 100%;
    }

    .automation-subtitle-section {
        width: 80%;
        margin: 0 auto;
        padding: 0;
    }

    .automation-subtitle {
        /* width: 80%;
        margin: 0 auto; */
        /* padding: 20px 10px; */
        padding: 10px 0;
    }

    .automation-subtitle h2 {
        font-size: 14px;
        line-height: 1.6;
    }

}



/* ----------------------------------- */

/* ROBOTICS */

.background-image-robotics {
    background-image: url("../img/Render/Robots/0.\ Sine\ sa\ robotima\ -\ 5\ -\ v2.jpg");
    background-position-y: center;
    /* background-position-y: -370px; */
    /* filter: blur(0.5px); */
}

/* .robotics-subtitle-section {
    position: relative;
    top: -30px;
    margin: 0px auto;
    max-width: 1000px;
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.robotics-subtitle h2 {
    font-size: 25px;
    color: rgb(130, 130, 130);
    font-weight: 400;
    text-align: center;
} */

.robotics-subtitle-section {
    position: relative;
    top: -30px;
    /* margin: 50px auto; */
    margin: 0px auto;
    /* width: 1000px; */
    max-width: 1000px;
    /* background-color: var(--light-background-color); */
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.robotics-subtitle h2 {
    font-size: 25px;
    color: var(--txt-color-box);
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
}



.robotics-subtitle p {
    margin-top: 10px;
    line-height: 1.6;
    text-align: center;
    /* color: rgb(130, 130, 130); */
    color: var(--txt-color-box);
    font-size: 20px;
}

.background-image-robotics::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

/* .robotics-container {
    background-color: var(--advanced-machines-color);
} */

.logo-robotics-section {
    display: flex;
    justify-content: space-around;
    padding-bottom: 30px;
}

.logo-robot {
    width: 20%;
    padding: 80px 0;
}




/* -- Text in pictures -- */

.padding-box {
    padding-top: 65px;
    /* background-color: #5167af; */
}

.image-default-heading {
    position: absolute;
    /* top: 40px; */
    /* top: 4%; */
    top: 80px;
    left: 30px;
}

/* box 1 track*/
.robots-image-box-track {
    position: relative;
}

/* .robots-image-box-track-text-1 {
    position: absolute;
    top: 80px;
    left: 30px;
} */

.robots-image-box-track-text-1 h3 {
    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.robots-image-box-track-text-1 h3 span {
    font-weight: 600;
}

.robots-image-box-track-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-track-text-3 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.robots-image-box-track-text-3 h4 span {
    color: var(--txt-color-primary);
    font-weight: 600;
    font-size: 30px;
}

.robots-image-box-track-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.robots-image-box-track-text-4 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    text-align: right;
    line-height: 1.5;
}

.robots-image-box-track-text-4 h4 span {
    color: var(--txt-color-primary);
    font-weight: 600;
    font-size: 30px;
}

.robots-image-box-track-text-5 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.robots-image-box-track-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    text-align: right;
    line-height: 1.5;
}

@media (max-width: 1500px) {

    .robots-image-box-track-text-1 h3 {
        font-size: 30px;
    }
    
    .robots-image-box-track-text-3 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-track-text-3 h4 span {
        font-size: 25px;
    }
    
    .robots-image-box-track-text-4 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-track-text-4 h4 span {
        font-size: 25px;
    }
    
    .robots-image-box-track-text-5 h4 {
        font-size: 15px;
        /* line-height: 1.5; */
    }

}

@media (max-width: 1000px) {

    .image-default-heading {
        top: 30px;
    }
    
    .robots-image-box-track {
        padding-bottom: 30px;
    }

    /* .robots-image-box-track-text-1 {
        top: 30px;
    } */

    .robots-image-box-track-text-1 h3 {
        font-size: 22px;
    }

    .track-flex {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
    }
    
    .robots-image-box-track-text-3 {
        position: relative;
    }
    
    .robots-image-box-track-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .robots-image-box-track-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-track-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .robots-image-box-track-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .robots-image-box-track-text-4 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-track-text-5 {
        position: relative;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }
    
    .robots-image-box-track-text-5 h4 {
        font-size: 15px;
        font-weight: 400;
        color: var(--txt-color-primary);
        text-align: center;
        line-height: 1.5;
    }

}

@media (max-width: 450px) {

    .image-default-heading {
        top: 40px;
        left: 10px;
    }

    /* .robots-image-box-track-text-1 {
        top: 40px;
        left: 10px;
    } */

    .robots-image-box-track-text-1 h3 {
        font-size: 16px;
    }

    .track-flex {
        flex-direction: column;
    }

    .robots-image-box-track-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .robots-image-box-track-text-3 h4 {
        font-size: 12px;
        line-height: 1.5;
        text-align: center;
    }

    .robots-image-box-track-text-3 h4 span {
        font-size: 18px;
    }

    .robots-image-box-track-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .robots-image-box-track-text-4 h4 {
        font-size: 12px;
        text-align: center;
        line-height: 1.5;
    }

    .robots-image-box-track-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-track-text-4 h4 span {
        font-size: 18px;
    }

}


/* box rotary table */
.robots-image-box-rotary {
    position: relative;
}

/* .robots-image-box-rotary-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.robots-image-box-rotary-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.robots-image-box-rotary-text-1 h3 span {
    font-weight: 600;
}

.robots-image-box-rotary-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-rotary-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--txt-color-light);
}

.robots-image-box-rotary-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-rotary-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.robots-image-box-rotary-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.robots-image-box-rotary-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.robots-image-box-rotary-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.robots-image-box-rotary-text-5 {
    position: absolute;
    top: 25%;
    /* top: 50px; */
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-rotary-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.robots-image-box-rotary-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.robots-image-box-rotary-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .robots-image-box-rotary-text-1 h3 {
        font-size: 30px;
    }
    
    .robots-image-box-rotary-text-3 h4{
        font-size: 15px;
    }
    
    .robots-image-box-rotary-text-4 h4{
        font-size: 15px;
    }
    
    .robots-image-box-rotary-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .robots-image-box-rotary-text-5 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-rotary-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .robots-image-box-rotary-text-1 h3 {
        font-size: 22px;
    }

    .robots-image-box-rotary {
        padding-bottom: 30px;
    }

    .robots-image-box-rotary-text-1 h3 {
        font-size: 22px;
    }

    .rotary-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .robots-image-box-rotary-text-3 {
        position: relative;
    }
    
    .robots-image-box-rotary-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .robots-image-box-rotary-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-rotary-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .robots-image-box-rotary-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .robots-image-box-rotary-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .robots-image-box-rotary-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .robots-image-box-rotary-text-6 {
        position: relative;
    }

    .robots-image-box-rotary-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 600px) {

    .rotary-flex {
        flex-direction: column;
    }

    .robots-image-box-rotary-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .robots-image-box-rotary-text-3 h4 {
        text-align: center;
    }

    .robots-image-box-rotary-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .robots-image-box-rotary-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .robots-image-box-rotary-text-1 {
        top: 5px;
        left: 10px;
    } */

    .robots-image-box-rotary-text-1 h3 {
        font-size: 16px;
    }

    .robots-image-box-rotary-text-3 h4 {
        font-size: 12px;
    }

    .robots-image-box-rotary-text-4 h4 {
        font-size: 12px;
    }

    .robots-image-box-rotary-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-rotary-text-6 h4 {
        font-size: 12px;
    }

}





/* box firebox */
.robots-image-box-firebox {
    position: relative;
}

/* .robots-image-box-firebox-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.robots-image-box-firebox-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.robots-image-box-firebox-text-1 h3 span {
    font-weight: 600;
}

.robots-image-box-firebox-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-firebox-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--txt-color-light);
}

.robots-image-box-firebox-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-firebox-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.robots-image-box-firebox-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.robots-image-box-firebox-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.robots-image-box-firebox-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.robots-image-box-firebox-text-5 {
    position: absolute;
    /* top: 20%; */
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-firebox-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.robots-image-box-firebox-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.robots-image-box-firebox-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .robots-image-box-firebox-text-1 h3 {
        font-size: 30px;
    }
    
    .robots-image-box-firebox-text-3 h4{
        font-size: 15px;
    }
    
    .robots-image-box-firebox-text-4 h4{
        font-size: 15px;
    }
    
    .robots-image-box-firebox-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .robots-image-box-firebox-text-5 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-firebox-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .robots-image-box-firebox-text-1 h3 {
        font-size: 22px;
    }

    .robots-image-box-firebox {
        padding-bottom: 30px;
    }

    .robots-image-box-firebox-text-1 h3 {
        font-size: 22px;
    }

    .firebox-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .robots-image-box-firebox-text-3 {
        position: relative;
    }
    
    .robots-image-box-firebox-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .robots-image-box-firebox-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-firebox-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .robots-image-box-firebox-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .robots-image-box-firebox-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .robots-image-box-firebox-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .robots-image-box-firebox-text-6 {
        position: relative;
    }

    .robots-image-box-firebox-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 600px) {

    .firebox-flex {
        flex-direction: column;
    }

    .robots-image-box-firebox-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .robots-image-box-firebox-text-3 h4 {
        text-align: center;
    }

    .robots-image-box-firebox-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .robots-image-box-firebox-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .robots-image-box-firebox-text-1 {
        top: 5px;
        left: 10px;
    } */

    .robots-image-box-firebox-text-1 h3 {
        font-size: 16px;
    }

    .robots-image-box-firebox-text-3 h4 {
        font-size: 12px;
    }

    .robots-image-box-firebox-text-4 h4 {
        font-size: 12px;
    }

    .robots-image-box-firebox-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-firebox-text-6 h4 {
        font-size: 12px;
    }

}






/* box robot cell */
.robots-image-box-cell {
    position: relative;
}

/* .robots-image-box-cell-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.robots-image-box-cell-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.robots-image-box-cell-text-1 h3 span {
    font-weight: 600;
}

.robots-image-box-cell-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-cell-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--txt-color-light);
}

.robots-image-box-cell-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-cell-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.robots-image-box-cell-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.robots-image-box-cell-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.robots-image-box-cell-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.robots-image-box-cell-text-5 {
    position: absolute;
    /* top: 20%; */
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-cell-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.robots-image-box-cell-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.robots-image-box-cell-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .robots-image-box-cell-text-1 h3 {
        font-size: 30px;
    }
    
    .robots-image-box-cell-text-3 h4{
        font-size: 15px;
    }
    
    .robots-image-box-cell-text-4 h4{
        font-size: 15px;
    }
    
    .robots-image-box-cell-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .robots-image-box-cell-text-5 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-cell-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .robots-image-box-cell-text-1 h3 {
        font-size: 22px;
    }

    .robots-image-box-cell {
        padding-bottom: 30px;
    }

    .robots-image-box-cell-text-1 h3 {
        font-size: 22px;
    }

    .cell-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .robots-image-box-cell-text-3 {
        position: relative;
    }
    
    .robots-image-box-cell-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .robots-image-box-cell-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-cell-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .robots-image-box-cell-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .robots-image-box-cell-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .robots-image-box-cell-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .robots-image-box-cell-text-6 {
        position: relative;
    }

    .robots-image-box-cell-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 600px) {

    .cell-flex {
        flex-direction: column;
    }

    .robots-image-box-cell-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .robots-image-box-cell-text-3 h4 {
        text-align: center;
    }

    .robots-image-box-cell-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .robots-image-box-cell-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .robots-image-box-cell-text-1 {
        top: 5px;
        left: 10px;
    } */

    .robots-image-box-cell-text-1 h3 {
        font-size: 16px;
    }

    .robots-image-box-cell-text-3 h4 {
        font-size: 12px;
    }

    .robots-image-box-cell-text-4 h4 {
        font-size: 12px;
    }

    .robots-image-box-cell-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-cell-text-6 h4 {
        font-size: 12px;
    }

}





/* box AZPK table */
.robots-image-box-azpk {
    position: relative;
}

/* .robots-image-box-azpk-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.robots-image-box-azpk-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.robots-image-box-azpk-text-1 h3 span {
    font-weight: 600;
}

.robots-image-box-azpk-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-azpk-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--txt-color-light);
}

.robots-image-box-azpk-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-azpk-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.robots-image-box-azpk-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.robots-image-box-azpk-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.robots-image-box-azpk-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.robots-image-box-azpk-text-5 {
    position: absolute;
    /* top: 20%; */
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-azpk-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.robots-image-box-rpl-text-5 {
    position: absolute;
    /* top: 20%; */
    top: 15%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-rpl-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.robots-image-box-azpk-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.robots-image-box-azpk-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .robots-image-box-azpk-text-1 h3 {
        font-size: 30px;
    }
    
    .robots-image-box-azpk-text-3 h4{
        font-size: 15px;
    }
    
    .robots-image-box-azpk-text-4 h4{
        font-size: 15px;
    }
    
    .robots-image-box-azpk-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .robots-image-box-azpk-text-5 h4 {
        font-size: 15px;
    }

    .robots-image-box-rpl-text-5 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-azpk-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .robots-image-box-azpk-text-1 h3 {
        font-size: 22px;
    }

    .robots-image-box-azpk {
        padding-bottom: 30px;
    }

    .robots-image-box-azpk-text-1 h3 {
        font-size: 22px;
    }

    .azpk-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .robots-image-box-azpk-text-3 {
        position: relative;
    }
    
    .robots-image-box-azpk-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .robots-image-box-azpk-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-azpk-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .robots-image-box-azpk-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .robots-image-box-azpk-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .robots-image-box-azpk-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .robots-image-box-rpl-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .robots-image-box-azpk-text-6 {
        position: relative;
    }

    .robots-image-box-azpk-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 600px) {

    .azpk-flex {
        flex-direction: column;
    }

    .robots-image-box-azpk-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .robots-image-box-azpk-text-3 h4 {
        text-align: center;
    }

    .robots-image-box-azpk-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .robots-image-box-azpk-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .robots-image-box-azpk-text-1 {
        top: 5px;
        left: 10px;
    } */

    .robots-image-box-azpk-text-1 h3 {
        font-size: 16px;
    }

    .robots-image-box-azpk-text-3 h4 {
        font-size: 12px;
    }

    .robots-image-box-azpk-text-4 h4 {
        font-size: 12px;
    }

    .robots-image-box-azpk-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-rpl-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-azpk-text-6 h4 {
        font-size: 12px;
    }

}




/* Water Tank Production line */
.robots-image-box-wtpl {
    position: relative;
}

/* .robots-image-box-wtpl-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.robots-image-box-wtpl-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.robots-image-box-wtpl-text-1 h3 span {
    font-weight: 600;
}

.robots-image-box-wtpl-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-wtpl-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--txt-color-light);
}

.robots-image-box-wtpl-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-wtpl-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.robots-image-box-wtpl-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.robots-image-box-wtpl-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.robots-image-box-wtpl-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.robots-image-box-wtpl-text-5 {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.robots-image-box-wtpl-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.robots-image-box-wtpl-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.robots-image-box-wtpl-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .robots-image-box-wtpl-text-1 h3 {
        font-size: 30px;
    }
    
    .robots-image-box-wtpl-text-3 h4{
        font-size: 15px;
    }
    
    .robots-image-box-wtpl-text-4 h4{
        font-size: 15px;
    }
    
    .robots-image-box-wtpl-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .robots-image-box-wtpl-text-5 h4 {
        font-size: 15px;
    }
    
    .robots-image-box-wtpl-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .robots-image-box-wtpl-text-1 h3 {
        font-size: 22px;
    }

    .robots-image-box-wtpl {
        padding-bottom: 30px;
    }

    .robots-image-box-wtpl-text-1 h3 {
        font-size: 22px;
    }

    .wtpl-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .robots-image-box-wtpl-text-3 {
        position: relative;
    }
    
    .robots-image-box-wtpl-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .robots-image-box-wtpl-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .robots-image-box-wtpl-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .robots-image-box-wtpl-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .robots-image-box-wtpl-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .robots-image-box-wtpl-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .robots-image-box-wtpl-text-6 {
        position: relative;
    }

    .robots-image-box-wtpl-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 600px) {

    .wtpl-flex {
        flex-direction: column;
    }

    .robots-image-box-wtpl-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .robots-image-box-wtpl-text-3 h4 {
        text-align: center;
    }

    .robots-image-box-wtpl-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .robots-image-box-wtpl-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .robots-image-box-wtpl-text-1 {
        top: 5px;
        left: 10px;
    } */

    .robots-image-box-wtpl-text-1 h3 {
        font-size: 16px;
    }

    .robots-image-box-wtpl-text-3 h4 {
        font-size: 12px;
    }

    .robots-image-box-wtpl-text-4 h4 {
        font-size: 12px;
    }

    .robots-image-box-wtpl-text-5 h4 {
        font-size: 12px;
    }

    .robots-image-box-wtpl-text-6 h4 {
        font-size: 12px;
    }

}









.robotics {
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    justify-content: space-between;
    /* border-bottom: 1px solid var(--footer-bg-color); */
}

.robot-img {
    display: none;
}

/* MODAL */

.modalRobots {
    display: none;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    /* background-color: white; */
    background-color: rgba(37, 37, 37, 0.95);
    /* padding-top: 50px; */
}

.modal-robots-container {
    /* width: 50%;
    margin: 0 auto; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.robot-img-spec {
    display: none;
}

/* .modal-robots-img {
    width: 30%;
    margin-right: 50px;
} */

.modal-robots-specification {
    width: 100%;
    margin: 0 auto;
}

.close-modal {
    /* position: absolute; */
    position: fixed;
    top: 30px;
    right: 80px;
    /* color: #f1f1f1; */
    /* color: var(--footer-bg-color); */
    color: white;
    font-size: 60px;
    font-weight: bold;
    transition: 0.4s;
    cursor: pointer;
    /* background-color: #5167af; */
    line-height: .6;
    /* z-index: 10; */
}

@media (min-width: 700px) {     
    .close-modal:hover {
        color: var(--advanced-machines-bg-color);
    }
}

  /* animacija za MODAL */
#modalSpec, .close-modal {  
    animation-name: zoom;
    animation-duration: 0.6s;
}
  
@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}
  /* kraj animacije */


@media (max-width: 1600px) {

    .modal-robots-specification {
        margin: 0 auto;
        height: 700px;
        overflow: auto;
    }

}

@media (max-width: 1000px) {

    .modal-robots-container {
        width: 80%;
    }

    .close-modal {
        /* position: absolute; */
        position: fixed;
        top: 30%;
        right: 10px;
        color: white;
        font-size: 40px;
        /* z-index: 10; */
    }

}

@media (max-width: 700px) {

    .modal-robots-container {
        width: 80%;
        height: 300px;
    }

}

  /* END MODAL */



.box-logo {
    position: absolute;
    top: -60px;
    right: 0;
    /* margin-left: auto; */

    width: 250px;
    margin-bottom: 30px;
}

.box-logo-2 {
    position: absolute;
    top: -60px;
    right: 0;
    /* margin-left: auto; */

    width: 250px;
    margin-bottom: 30px;
}

@media (max-width: 1300px) {

    .box-logo-2 {
        top: -60px;
    }
}

@media (max-width: 1000px) {
    .box-logo {
        width: 200px;
    }

    .box-logo-2 {
        width: 200px;
    }
}

.box-robotics-text-img {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: burlywood; */
}

.box-robotics-text-img p {
    line-height: 1.6;
    color: var(--gray-logo-color);
}

.box-robotics-subtitle {
    text-align: center;
    /* color: var(--txt-color-primary); */
    color: var(--gray-logo-color);
    padding-bottom: 50px;
    font-size: 25px;

}

.box-robotics-spec {
    width: 50%;
}

.box-robotics-img {
    max-width: 300px;
    margin: 0 auto;

}

/* controller e60 */
.controller-e60 {
    text-align: center;
    background-color: var(--footer-bg-color);
    /* height: 35px; */
}

.controller-e60 p {
    position: relative;
    /* padding: 10px 0px; */
    height: 35px;
    background-color: var(--blue-logo-color);
    color: var(--advanced-machines-color);
    font-weight: 700;
}

.controller-e60 p span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.controller-container {
    background-color: var(--advanced-machines-color);
}


/* END ROBOTICS DESKTOP */

/* ROBOTICS TABLET */

@media (max-width: 1600px) {
    .background-image-robotics {
        background-position: center;
        /* background-position-y: -250px; */
    }
}

@media (max-width: 1300px) {

    .background-image {
        position: relative;
        height: 400px;
    }

    .background-image-robotics {
        background-position: center;
    }

    .subtitle {
        font-size: 35px;
        /* letter-spacing: 1.5px; */
    }

}

/* END ROBOTICS TABLET */


/* ROBOTICS MOBILE */

@media (max-width: 1000px) {

    .background-image {
        height: 250px;
    }
    
    .subtitle {
        font-size: 20px;
        letter-spacing: 1.5px;
    }

    .robotics-subtitle-section {
        width: 80%;
        margin: 0 auto;
        padding: 0;
    }

    .robotics-subtitle {
        /* width: 80%;
        margin: 0 auto; */
        /* padding: 20px 10px; */
        padding: 10px 0;
    }

    .robotics-subtitle h2 {
        font-size: 14px;
        line-height: 1.6;
    }

    .robotics-subtitle p {
        font-size: 12px;
        line-height: 1.6;
    }

    .box-robotics-subtitle {
        padding-bottom: 25px;
        font-size: 20px;
    }

    .logo-robotics-section {
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
    }
    
    .logo-robot {
        width: 130px;
        padding: 15px 0;
    }

    .robotics {
        padding-top: 50px;
        padding-bottom: 50px;
        flex-direction: column;
        /* justify-content: space-between; */
    }

    .robotics:nth-child(odd) {
        flex-direction: column-reverse;
    }

    .box-robotics-text-img {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .box-robotics-spec {
        width: 100%;
    }

}

/* END ROBOTICS MOBILE */


/* --------------------- */
/* TECHNOLOGY NEW */

.technology-new {
    padding-bottom: 30px;

    background-color: var(--light-background-color2);
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.technology-new-box-title {
    position: relative;
    /* top: -20px; */
    width: 600px;
    margin: 0 auto;
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
    padding: 100px 0 30px;
    /* background-color: var(--blue-logo-color); */
    color: var(--gray-logo-color);
}

.technology-new-container {
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.technology-new-box {
    position: relative;
    width: 250px;
    /* height: 400px; */
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    transition: .5s;
}

.technology-new-box a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .4s;
    cursor: pointer;
    background-color: rgba(121, 121, 121, 0.2);
}

/* .technology-new-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .4s;
    cursor: pointer;
    background-color: rgba(121, 121, 121, 0.2);
} */

.technology-new-box a:hover::before {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.technology-new-box-img {
    /* width: 70%; */
    width: 250px;
    margin: 0 auto;
}

.technology-new-box-img img {
    /* width: 150px; */
    height: 250px;
    object-fit: cover;
    /* object-fit: inherit; */
    /* object-position: 30px 30px; */
}

.technology-new-box-description {
    padding: 15px;
}

.technology-new-box-subtitle {
    margin-bottom: 15px;
    color: var(--gray-logo-color);
}

.technology-new-box-text {
    color: var(--gray-logo-color);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 1300px) {
    .technology-new-box {
        position: relative;
        width: 250px;
        /* height: 400px; */
        background-color: white;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 30px;
        transition: .5s;
    }
}

@media (max-width: 1000px) {

    .technology-new-box-title {
        width: 100%;
        font-size: 20px;
        /* font-weight: 400; */
        padding: 70px 0 10px;
    }

    .technology-new-box {
        width: 80%;
        margin: 0 auto 30px;
        transition: .5s;
    }

    .technology-new-box-img {
        width: 100%;
        margin: 0 auto;
    }

    .technology-new-box-img img {
        /* width: 150px; */
        height: 350px;
        object-fit: cover;
    }

    .technology-new-box-subtitle {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .technology-new-box-text {
        font-size: 12px;
    }
}

/* END TECHNOLOGY NEW */
/* --------------------- */



/* ------------------------------------- */
/* STANDARD SISTEM CONFIGURATION NEW */
/* ------------------------------------- */
.standard-configuration-new {
    background-color: white;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.standard-configuration-new-title {
    position: relative;
    /* top: -20px; */
    width: 900px;
    /* width: 850px; */
    margin: 0 auto;
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
    padding: 100px 0 30px;
    /* background-color: var(--blue-logo-color); */
    /* color: var(--txt-color-light); */
    color: var(--gray-logo-color);
}

.standard-configuration-new-container {
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.standard-configuration-new-box {
    position: relative;
    width: 350px;
    /* height: 400px; */
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 90px;
    transition: .5s;
}

.standard-configuration-new-box-img {
    height: 250px;
}

.standard-configuration-new-box-img img {
    /* height: 250px; */
    height: 100%;
    object-fit: cover;
}

/* starija verzija koja je zumirana */
/* .standard-configuration-new-box img {
    height: 350px;
    object-fit: cover;
} */

.standard-configuration-new-box-description {
    padding: 15px;
}

.standard-configuration-new-box-subtitle {
    margin-bottom: 15px;
    color: var(--gray-logo-color);
}

.standard-configuration-new-box-text {
    color: var(--gray-logo-color);
    font-size: 14px;
    line-height: 1.6;
}

.standard-configuration-new-box a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .4s;
    cursor: pointer;
    background-color: rgba(180, 180, 180, 0.2);
}

.standard-configuration-new-box a:hover::before {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.standard-configuration-new-bottom {
    text-align: center;
    font-size: 25px;
    color: var(--footer-bg-color);
    padding-bottom: 50px;
}

@media (max-width: 1000px) {

    .standard-configuration-new-title {
        width: 100%;
        font-size: 20px;
        padding: 70px 0 10px;
    }

    .standard-configuration-new-box {
        width: 100%;
        /* height: 400px; */
        margin: 0 auto;
        margin-bottom: 40px;
    }

    .standard-configuration-new-box-img {
        height: 300px;
    }

    .standard-configuration-new-box-subtitle {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .standard-configuration-new-box-text {
        font-size: 12px;
    }

    .standard-configuration-new-bottom {
        font-size: 16px;
        padding-bottom: 50px;
    }

    .standard-configuration-new-bottom p {
        padding: 0 20px 0;
    }

}




/* ------------------------------------- */
/* END STANDARD SISTEM CONFIGURATION NEW */
/* ------------------------------------- */


/* robotics - technology */

.background-image-technology {
    /* background-image: url("../img/razno/technology\ cut\ 2.png"); */
    background-image: url("../img/razno/kuka.png");
    background-position-y: -300px;
    filter: blur(2px);
}

.background-image-technology::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* podesavanje da span bude u sredini */
.technology-list ul li span {
    position: absolute;
    width: 100%;
    /* height: 100%; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: burlywood; */
}

/* .technology-container {
    background-color: var(--advanced-machines-color);
} */

.technology-container:nth-child(odd) {
    /* background-color: var(--light-background-color); */
    background-color: white;

    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.technology-container p {
    margin-bottom: 15px;
}

.technology-list {
    background-color: var(--footer-bg-color);
    /* padding: 100px 0 50px; */
    /* border-bottom: 1px solid var(--footer-bg-color); */
}

.technology-list h3 {
    text-align: center;
    font-size: 25px;
    font-weight: 400;
    padding-bottom: 40px;
}

.technology-list ul {
    display: flex;
    justify-content: space-around;
    /* align-items: stretch; */
    /* align-items: center; */
    /* align-content: center; */
}

.technology-list ul li {
    /* background-color: #5167af; */
    padding: 10px 0;
    text-align: center;
    color: var(--advanced-machines-color);
    background-color: var(--footer-bg-color);
    font-weight: 700;
    transition: .5s;
    cursor: pointer;
    /* podesavanje da span bude u sredini */
    position: relative;
    width: 100%;
    height: 35px;
}

@media (min-width: 1001px) {
    .technology-list ul li:hover {
        /* color: var(--txt-color-primary); */
        background-color: var(--blue-logo-color);
    }
}

/* podesavanje da span bude u sredini */
.technology-list ul li span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: burlywood; */
}

/* TECHNOLOGY BOX CARDS */
.technology-box-section {
    padding: 50px 0;
}

.technology-box-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* align-content: center; */
    /* background-color: rgba(160, 160, 160, 0.8); */
    background-color: var(--light-background-color);
    /* padding: 50px 20px 50px; */
    padding: 50px 20px 30px;
}

.technology-box-card {
    position: relative;
    width: 400px;
    margin-bottom: 20px;
    /* padding: 10px; */
}

.technology-box-card::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: .5s;
    cursor: pointer;
}

.technology-box-card:hover::before {
    background-color: rgba(0, 0, 0, 0.2);
}

.technology-box-title {
    position: relative;
    top: 20px;
    width: 600px;
    margin: 0 auto;
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0;
    background-color: var(--blue-logo-color);
    color: var(--txt-color-light);
}

.technology-box-card img {
    object-fit: cover;
    object-position: center;
    height: 250px;
}

/* h5 */
.technology-card-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 400;
    color: var(--advanced-machines-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    cursor: pointer;
}


/* ------- standard configuration sistem --------- */

.configuration-list {
    background-color: var(--footer-bg-color);
    /* padding: 100px 0 50px; */
    /* border-bottom: 1px solid var(--footer-bg-color); */
}

.configuration-list h3 {
    text-align: center;
    font-size: 25px;
    font-weight: 400;
    padding-bottom: 40px;
}

.tab-configuration-list {
    /* background-color: #5167af; */
    padding-left: 40px;
}

.tab-configuration-list li {
    list-style-type: disc;
    /* list-style-type: square; */
    margin-bottom: 10px;
}

@media (max-width: 1300px) {

    .tab-configuration-list li {
        font-size: 14px;
        margin-bottom: 10px;
    }

}

.tab-configuration-list li:last-child {
    margin-bottom: 0;
}

.configuration-list ul {
    display: flex;
    justify-content: space-around;
}

.configuration-list ul li {
    /* background-color: #5167af; */
    padding: 10px 0;
    text-align: center;
    color: var(--advanced-machines-color);
    background-color: var(--footer-bg-color);
    font-weight: 700;
    transition: .5s;
    cursor: pointer;
    /* podesavanje da span bude u sredini */
    position: relative;
    width: 100%;
    height: 35px;
}

@media (min-width: 1001px) {
    .configuration-list ul li:hover {
        /* color: var(--txt-color-primary); */
        background-color: var(--blue-logo-color);
    }
}

/* podesavanje da span bude u sredini */
.configuration-list ul li span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: burlywood; */
}

/* .configuration-container {
    background-color: var(--advanced-machines-color);
} */
.configuration-container p {
    line-height: 1.6;
}

.configuration-container:nth-child(even) {
    background-color: var(--light-background-color);

    box-shadow: 0px 0px 12px rgba(150,150,150);
    /* background-image: linear-gradient(to right, var(--light-background-color), white); */
}

/* .configuration-container:nth-child(odd) {
    background-image: linear-gradient(to right, white, var(--light-background-color));
} */


/* START standard configuration sistem TABLET */
@media (max-width: 1300px) {
    
    .configuration-container p {
        font-size: 14px;
    }

}
/* END standard configuration sistem TABLET */


/* ---------- CONTACT ---------- */

.background-image-contact {
    /* background-image: url("../img/razno/contact-background\ 2500x828.jpg"); */
    /* background-position-y: 100px; */
    
    background-image: url("../img/Advenmach\ slike\ s\ puta/123123.jpg");
    background-position: center;
    /* background-position-y: -250px; */
    /* filter: blur(2px); */
}

@media (max-width: 500px) {
    .background-image-contact {
        background-position: right;
    }
}

.contact {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px 0 80px;
    /* clear: both; */
}

.contact-address {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    color: var(--txt-color-primary);
    font-size: 15px;
}

.contact-address-place li {
    line-height: 1.8;
}

.contact-address-contact li {
    line-height: 1.2;
}

.contact-address-data {
    line-height: 1.7;
    margin-top: 4px;
}

.contact-map-container {
    width: 50%;
    /* background-color: rosybrown; */
}

.contact-map {
    /* height: 530px; */
    height: 635px;
    width: 100%;
}

.icon-before {
    width: 22px;

    /* position: absolute; */
    /* top: -3px; */
    /* left: -27px; */
    
    display: inline-block;
    position: relative;
    top: 4px;
    margin-right: 5px;
}

.move-text-right {
    padding-left: 27px;
}

/* ---------- Contact Form ---------- */

.contact-form {
    width: 45%;
    /* background-color: darkgreen; */
}

.contact-form-container {
    /* width: 500px; */
    /* width: 80%; */
    margin: 0 auto;
    /* padding: 80px 0; */
    /* text-align: center; */
    /* background-color: chartreuse; */
}

.contact-form-container h2 span {
    color: var(--txt-color-primary);
    margin-bottom: 15px;
    font-size: 25px;
    /* font-weight: 400; */
}

.contact-form-container form {
    display: flex;
    flex-direction: column;
}

.contact-form-container form input {
    margin-bottom: 15px;
    padding: 15px 10px;
    color: var(--txt-color-primary);
    border-radius: 8px;
    border: 1px solid var(--gray-logo-color);
}

.contact-form-container form textarea {
    margin-bottom: 15px;
    padding: 15px 10px;
    color: var(--txt-color-primary);
    border-radius: 8px;
    border: 1px solid var(--gray-logo-color);
}

.contact-form-container form input::placeholder,
textarea::placeholder {
    color: var(--gray-logo-color);
}

#contact-submit {
    /* border: 1px solid var(--footer-bg-color); */
    padding: 15px 0;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    background-color: var(--blue-logo-color);
    color: var(--txt-color-light);
    cursor: pointer;
    transition: .5s;
}

@media (min-width: 1001px) {
    #contact-submit:hover {
        background-color: rgb(0, 100, 200);
    }
}

@media (max-width: 1300px) {

    .contact-form {
        width: 47%;
    }

    .contact-address {
        padding: 30px 0;
        font-size: 14px;
    }

    .contact-form-container h2 span {
        font-size: 20px;
    }

    .contact-map {
        height: 630px;
    }

}

@media (max-width: 1000px) {

    .contact {
        flex-direction: column-reverse;
        /* align-items: flex-end; */
        /* justify-content: space-between; */
        padding: 10px 0 50px;
    }

    .contact-map-container {
        width: 100%;
    }

    .contact-form {
        width: 100%;
        padding-bottom: 50px;
    }

    .contact-address {
        font-size: 12px;
    }

    .contact-form-container form input {
        padding: 12px 10px;
        font-size: 12px;
    }
    
    .contact-form-container form textarea {
        padding: 12px 10px;
        font-size: 12px;
    }

}

@media (max-width: 600px) {

    .contact-address {
        font-size: 10px;
    }

    .contact-form-container h2 span {
        font-size: 16px;
    }

    .contact-form-container form input {
        padding: 12px 10px;
        font-size: 10px;
    }
    
    .contact-form-container form textarea {
        padding: 12px 10px;
        font-size: 10px;
    }

    .icon-before {
        width: 15px;
        top: 4px;
        margin-right: 5px;
    }
    
    .move-text-right {
        padding-left: 20px;
    }

    #contact-submit {
        font-size: 10px;
        padding: 10px 0;
    }

}

@media (max-width: 360px) {

    .contact-address {
        font-size: 12px;
        flex-wrap: wrap;
    }

    .contact-address ul {
        margin-bottom: 20px;
    }

    .contact-address ul:last-child {
        margin-bottom: 0;
    }

}


/* NEW ROBOTS ROBOTICS */
.robots {
    /* background-color: var(--advanced-machines-color); */
    background-color: white;
    padding: 0 0 70px;

    box-shadow: 0px 0px 12px rgba(150,150,150);
}



.robots-heading {
    position: relative;
    /* top: -20px; */
    text-align: center;
    font-size: 35px;
    width: 650px;
    padding: 100px 0 40px;
    margin: 0 auto 20px;
    /* color: var(--txt-color-light); */
    color: var(--gray-logo-color);
    /* background-color: var(--blue-logo-color); */
    text-transform: uppercase;
}

.robots-container {
    display: flex;
    justify-content: space-evenly;
    /* justify-content: flex-start; */
    flex-wrap: wrap;
}

.robots-box {
    position: relative;
    width: 250px;
    /* height: 400px; */
    background-color: white;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    transition: .5s;
    cursor: pointer;

    box-shadow: 0px 0px 12px rgba(150,150,150);

    /* background-color: var(--light-background-color2); */
}

/* @media (min-width: 700px) {
    .robots-box:hover {
        box-shadow: 0px 0px 10px -4px #000000;
    }
} */

.robots-box-subtitle {
    text-align: center;
    /* color: var(--txt-color-light); */
    color: var(--gray-logo-color);
    font-size: 16px;
    font-weight: 400;
    padding: 10px 0;
    /* border-top: 1px solid var(--gray-logo-color); */
}

.robots-box-img {
    /* width: 70%; */
    width: 150px;
    margin: 0 auto;
}

.robots-box-img img {
    /* width: 150px; */
    height: 250px;
    object-fit: cover;
}

.robots-box-description {
    /* background-color: var(--light-background-color2); */
    /* background-color: var(--footer-bg-color); */
    background-color: var(--light-background-color2);
    margin-top: 20px;
    padding: 15px 0;
}

.robots-btn {
    /* position: absolute; */
    /* bottom: 15px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    display: block;
    margin: 0 auto;
    padding: 7px 15px;
    cursor: pointer;
    border-radius: 10px;
    border-width: 0;
    /* background-color: var(--gray-logo-color); */
    background-color: var(--blue-logo-color);
    color: white;
}

@media (max-width: 1000px) {
    .robots-heading {
        margin: 0px auto 10px;
        padding: 10px 0 30px;
        font-size: 20px;
        width: 100%;
        /* font-weight: 400; */
    }

    .robots-box-subtitle {
        font-size: 13px;
        font-weight: 400;
        /* padding: 10px 0; */
    }
}



/* NOVE KARTICE ZA KONFIGURACIJU */
.standardna-konfiguracija-container {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
}

.robot-kartica {
    flex-basis: 48%;
    /* padding: 30px 0; */
}

.robot-kartica h3 {
    width: 300px;
    background-color: var(--blue-logo-color);
    color: var(--txt-color-light);
    margin: 0 auto;
    text-align: center;
    padding: 15px 0;
    position: relative;
    top: 20px;
    font-size: 25px;
}

.robot-kartica p {
    padding: 20px 0;
    /* border-right: 1px solid var(--gray-logo-color); */
    /* border-left: 1px solid var(--gray-logo-color); */
    border-bottom: 1px solid var(--gray-logo-color);
}

.konfiguracija-slika {
    box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.8);
}

.konfiguracija-slika img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}




.standardna-konfiguracija-container-2 {
    background-color: var(--light-background-color2);
}

.standardna-konfiguracija-container-2-boxes {
    display: flex;
    justify-content: space-between;
    padding: 50px 0;
}

.robot-kartica-2 {
    flex-basis: 48%;
}

.robot-kartica-2 h3 {
    width: 300px;
    padding: 15px;
    text-align: center;
    /* margin: 0 auto; */
    background-color: var(--blue-logo-color);
    color: var(--txt-color-light);
    font-size: 20px;
    position: relative;
    top: 20px;
}

.levo-zakaceno {
    margin-left: 50px;
}

.desno-zakaceno {
    /* margin-right: 50px; */
    margin: 0 50px 0 auto;
}

.robot-kartica-box-2 {
    box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.8);
}

.robot-kartica-box-2 p {
    padding: 15px 10px;
    text-align: center;
}




/* END NEW ROBOTS DESKTOP */

/* ROBOTS TABLET */

@media (max-width: 1300px) {

    .robots {
        padding: 70px 0 40px;
    }

}

/* ROBOTS MOBILE */

@media (max-width: 700px) {

    .robots {
        padding: 50px 0 20px;
    }

    .robots-box {
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 30px;
    }

}


.automation-section {
    padding: 100px 20px;

    min-height: 620px;
}

.automation-section img {
    width: 700px;
    float: right;
    margin-left: 50px;
    margin-bottom: 30px;
}

.automation-section p {
    color: var(--gray-logo-color);
    line-height: 1.6;
}


.partners {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;

    padding: 100px 0 100px;
}

.partners-section {
    background-color: white;
    /* background-color: var(--light-background-color2); */

    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.partners-container {
    width: 680px;
    margin: 0 auto;
    /* padding: 50px 20px; */
    /* background-color: #e0bf9f; */
}

.partners-title {
    /* background-color: #5167af; */
    padding-left: 40px;
    padding-top: 50px;
}

.partners-text p {
    font-size: 20px;
    line-height: 1;
    color: var(--gray-logo-color);
    /* color: var(--txt-color-primary); */
    /* background-color: blanchedalmond; */
    /* text-transform: uppercase; */
    font-weight: 400;
}

/* PLAVI KVADRATICI ISPRED TEKSTA */
.partners-text p::before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: var(--blue-logo-color);
    margin-right: 20px;
    position: relative;
    top: 3px;
}

.partners-logo {
    width: 150px;
    margin: 20px 20px;
}

@media (max-width: 1000px) {

    .automation-section {
        padding: 20px 0;

        min-height: 300px;
    }

    .automation-section img {
        width: 80%;
        float: none;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .automation-section p {
        font-size: 12px;
        padding: 0 20px;
    }

    .background-image-automation {
        background-position-y: 0px;
    }

    .partners {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    
        padding: 30px 0;
    }

    .partners-container {
        width: 300px;
        margin: 0 auto;
        /* background-color: #5167af; */
    }

    .partners-title {
        padding-left: 30px;
    }

    .partners-text p {
        font-size: 12px;
        line-height: 1.5;
        color: var(--gray-logo-color);
        /* color: var(--txt-color-primary); */
        padding-left: 0px;

    }
    
    /* PLAVI KVADRATICI ISPRED TEKSTA */
    .partners-text p::before {
        height: 15px;
        width: 15px;
        margin-right: 15px;
    }

}

@media(max-width: 600px) {

    .partners {
        display: flex;
        flex-direction: column;
        /* justify-content: space-evenly; */
        align-items: center;
    }

    .partners-logo {
        width: 200px;
        margin-bottom: 20px;
    }

    .partners-logo:last-child {
        margin-bottom: 0;
    }

}


/* ---------  PRODUCTS  --------- */

.product-boxes {
    /* margin-top: 60px; */
    margin-top: 3px;
    padding-top: 10px;
    padding-bottom: 50px;
    background-color: white;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.product-box {
    /* text-align: center; */
    padding-top: 100px;
    padding-bottom: 100px;
    /* background-color: #c7c8cc; */
    border-bottom: 1px solid rgba(120, 120, 120, 0.2);
}

.product-box:last-child {
    border-bottom: none;
}

.product-box-container {
    max-width: 1000px;
    margin: 0 auto;
    cursor: pointer;
    border: 2px solid rgba(50, 50, 50, 0.0);
    border-radius: 5px;
    transition: 0.7s;
}

@media (min-width: 1001px) {
    .product-box-container:hover {
        border: 1px solid rgba(50, 50, 50, 0.15);
        border-radius: 10px;
    }
}

.product-box h2 {
    padding-top: 20px;
    padding-bottom: 60px;
    text-align: center;
    /* font-family: "Libre Franklin", sans-serif; */
    font-size: 44px;
    /* font-weight: 600; */
    /* color: var(--blue-logo-color); */
    color: var(--txt-color-primary);
}

.product-box h2 span {
    font-family: "Libre Franklin", Sans-serif;
    text-transform: capitalize;
    /* font-weight: 600; */
}

.product-box-img {
    margin: 0 auto;
    /* max-width: 700px; */
    max-width: 90%;
}





/* box product leak test machine*/
.product-image-box-ltm {
    position: relative;
}

/* .product-image-box-ltm-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.product-image-box-ltm-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.product-image-box-ltm-text-1 h3 span {
    font-weight: 600;
}

.product-image-box-ltm-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-ltm-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    color: var(--txt-color-light);
}

.product-image-box-ltm-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-ltm-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
}

.product-image-box-ltm-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.product-image-box-ltm-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.product-image-box-ltm-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.product-image-box-ltm-text-5 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-ltm-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.product-image-box-ltm-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.product-image-box-ltm-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .product-image-box-ltm-text-1 h3 {
        font-size: 30px;
    }
    
    .product-image-box-ltm-text-3 h4{
        font-size: 15px;
    }
    
    .product-image-box-ltm-text-4 h4{
        font-size: 15px;
    }
    
    .product-image-box-ltm-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .product-image-box-ltm-text-5 h4 {
        font-size: 15px;
    }
    
    .product-image-box-ltm-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .product-image-box-ltm-text-1 h3 {
        font-size: 22px;
    }

    .product-image-box-ltm {
        padding-bottom: 30px;
    }

    .product-image-box-ltm-text-1 h3 {
        font-size: 22px;
    }

    .ltm-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .product-image-box-ltm-text-3 {
        position: relative;
    }
    
    .product-image-box-ltm-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .product-image-box-ltm-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .product-image-box-ltm-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .product-image-box-ltm-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .product-image-box-ltm-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .product-image-box-ltm-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .product-image-box-ltm-text-6 {
        position: relative;
    }

    .product-image-box-ltm-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 780px) {

    .ltm-flex {
        flex-direction: column;
    }

    .product-image-box-ltm-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .product-image-box-ltm-text-3 h4 {
        text-align: center;
    }

    .product-image-box-ltm-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .product-image-box-ltm-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .product-image-box-ltm-text-1 {
        top: 5px;
        left: 10px;
    } */

    .product-image-box-ltm-text-1 h3 {
        font-size: 16px;
    }

    .product-image-box-ltm-text-3 h4 {
        font-size: 12px;
    }

    .product-image-box-ltm-text-4 h4 {
        font-size: 12px;
    }

    .product-image-box-ltm-text-5 h4 {
        font-size: 12px;
    }

    .product-image-box-ltm-text-6 h4 {
        font-size: 12px;
    }

}





/* box product gantry systems*/
.product-image-box-gantry {
    position: relative;
}

/* .product-image-box-gantry-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.product-image-box-gantry-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.product-image-box-gantry-text-1 h3 span {
    font-weight: 600;
}

.product-image-box-gantry-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.product-image-box-gantry-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-light);
    line-height: 1.5;
    text-align: right;
}

.product-image-box-gantry-text-4 h4 span {
    color: rgb(251, 255, 0);
}

@media (max-width: 1500px) {
    
    .product-image-box-gantry-text-1 h3 {
        font-size: 30px;
    }
    
    .product-image-box-gantry-text-3 h4{
        font-size: 15px;
    }
    
    .product-image-box-gantry-text-4 h4{
        font-size: 15px;
    }
    
    .product-image-box-gantry-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .product-image-box-gantry-text-5 h4 {
        font-size: 15px;
    }
    
    .product-image-box-gantry-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .product-image-box-gantry-text-1 h3 {
        font-size: 22px;
    }

    .product-image-box-gantry {
        padding-bottom: 30px;
    }

    .product-image-box-gantry-text-1 h3 {
        font-size: 22px;
    }

    /* .gantry-flex {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 20px;
    } */
    
    .product-image-box-gantry-text-4 {
        position: relative;
        bottom: 4%;
        right: 0px;
    }
    
    .product-image-box-gantry-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: center;
        line-height: 1.5;
    }
    
    .product-image-box-gantry-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }

}

@media (max-width: 780px) {

    /* .gantry-flex {
        flex-direction: column;
    } */

    .product-image-box-gantry-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .product-image-box-gantry-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .product-image-box-gantry-text-1 {
        top: 5px;
        left: 10px;
    } */

    .product-image-box-gantry-text-1 h3 {
        font-size: 16px;
    }

    .product-image-box-gantry-text-4 h4 {
        font-size: 12px;
    }

}



/* box product FPL */
.product-image-box-fpl {
    position: relative;
}

/* .product-image-box-fpl-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.product-image-box-fpl-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.product-image-box-fpl-text-1 h3 span {
    font-weight: 600;
}

.product-image-box-fpl-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-fpl-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
}

.product-image-box-fpl-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-fpl-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
}

.product-image-box-fpl-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.product-image-box-fpl-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: right;
}

.product-image-box-fpl-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.product-image-box-fpl-text-5 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-fpl-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.product-image-box-fpl-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.product-image-box-fpl-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .product-image-box-fpl-text-1 h3 {
        font-size: 30px;
    }
    
    .product-image-box-fpl-text-3 h4{
        font-size: 15px;
    }
    
    .product-image-box-fpl-text-4 h4{
        font-size: 15px;
    }
    
    .product-image-box-fpl-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .product-image-box-fpl-text-5 h4 {
        font-size: 15px;
    }
    
    .product-image-box-fpl-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .product-image-box-fpl-text-1 h3 {
        font-size: 22px;
    }

    .product-image-box-fpl {
        padding-bottom: 30px;
    }

    .product-image-box-fpl-text-1 h3 {
        font-size: 22px;
    }

    .fpl-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .product-image-box-fpl-text-3 {
        position: relative;
    }
    
    .product-image-box-fpl-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .product-image-box-fpl-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .product-image-box-fpl-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .product-image-box-fpl-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .product-image-box-fpl-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .product-image-box-fpl-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .product-image-box-fpl-text-6 {
        position: relative;
    }

    .product-image-box-fpl-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 780px) {

    .fpl-flex {
        flex-direction: column;
    }

    .product-image-box-fpl-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .product-image-box-fpl-text-3 h4 {
        text-align: center;
    }

    .product-image-box-fpl-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .product-image-box-fpl-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .product-image-box-fpl-text-1 {
        top: 5px;
        left: 10px;
    } */

    .product-image-box-fpl-text-1 h3 {
        font-size: 16px;
    }

    .product-image-box-fpl-text-3 h4 {
        font-size: 12px;
    }

    .product-image-box-fpl-text-4 h4 {
        font-size: 12px;
    }

    .product-image-box-fpl-text-5 h4 {
        font-size: 12px;
    }

    .product-image-box-fpl-text-6 h4 {
        font-size: 12px;
    }

}

/* --------------------- */


/* box product longitudinal*/
.product-image-box-longitudinal {
    position: relative;
}

/* .product-image-box-longitudinal-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.product-image-box-longitudinal-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.product-image-box-longitudinal-text-1 h3 span {
    font-weight: 600;
}

.product-image-box-longitudinal-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-longitudinal-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
}

.product-image-box-longitudinal-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-longitudinal-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
}

.product-image-box-longitudinal-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.product-image-box-longitudinal-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: right;
}

.product-image-box-longitudinal-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.product-image-box-longitudinal-text-5 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-longitudinal-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.product-image-box-longitudinal-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.product-image-box-longitudinal-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .product-image-box-longitudinal-text-1 h3 {
        font-size: 30px;
    }
    
    .product-image-box-longitudinal-text-3 h4{
        font-size: 15px;
    }
    
    .product-image-box-longitudinal-text-4 h4{
        font-size: 15px;
    }
    
    .product-image-box-longitudinal-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .product-image-box-longitudinal-text-5 h4 {
        font-size: 15px;
    }
    
    .product-image-box-longitudinal-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .product-image-box-longitudinal-text-1 h3 {
        font-size: 22px;
    }

    .product-image-box-longitudinal {
        padding-bottom: 30px;
    }

    .product-image-box-longitudinal-text-1 h3 {
        font-size: 22px;
    }

    .longitudinal-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .product-image-box-longitudinal-text-3 {
        position: relative;
    }
    
    .product-image-box-longitudinal-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .product-image-box-longitudinal-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .product-image-box-longitudinal-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .product-image-box-longitudinal-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .product-image-box-longitudinal-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .product-image-box-longitudinal-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .product-image-box-longitudinal-text-6 {
        position: relative;
    }

    .product-image-box-longitudinal-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 780px) {

    .longitudinal-flex {
        flex-direction: column;
    }

    .product-image-box-longitudinal-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .product-image-box-longitudinal-text-3 h4 {
        text-align: center;
    }

    .product-image-box-longitudinal-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .product-image-box-longitudinal-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .product-image-box-longitudinal-text-1 {
        top: 5px;
        left: 10px;
    } */

    .product-image-box-longitudinal-text-1 h3 {
        font-size: 16px;
    }

    .product-image-box-longitudinal-text-3 h4 {
        font-size: 12px;
    }

    .product-image-box-longitudinal-text-4 h4 {
        font-size: 12px;
    }

    .product-image-box-longitudinal-text-5 h4 {
        font-size: 12px;
    }

    .product-image-box-longitudinal-text-6 h4 {
        font-size: 12px;
    }

}


/* box product radial*/
.product-image-box-radial {
    position: relative;
}

/* .product-image-box-radial-text-1 {
    position: absolute;
    top: 10%;
    left: 30px;
} */

.product-image-box-radial-text-1 h3 {
    /* font-size: 25px;
    color: var(--txt-color-light); */

    font-size: 40px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    text-transform: capitalize;
}

.product-image-box-radial-text-1 h3 span {
    font-weight: 600;
}

.product-image-box-radial-text-2 {
    position: absolute;
    top: 4%;
    right: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-radial-text-2 h4 {
    font-size: 25px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
}

.product-image-box-radial-text-3 {
    position: absolute;
    bottom: 4%;
    left: 30px;
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-radial-text-3 h4{
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
}

.product-image-box-radial-text-4 {
    position: absolute;
    bottom: 4%;
    right: 30px;
}

.product-image-box-radial-text-4 h4{
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: right;
}

.product-image-box-radial-text-4 h4 span {
    color: rgb(251, 255, 0);
}

.product-image-box-radial-text-5 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    /* background-color: rgba(80, 80, 80, 0.8); */
}

.product-image-box-radial-text-5 h4 {
    font-size: 20px;
    font-weight: 400;
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.product-image-box-radial-text-6 {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%);
}

.product-image-box-radial-text-6 h4 {
    font-size: 20px;
    font-weight: 400;
    /* color: var(--txt-color-light); */
    color: var(--txt-color-primary);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1500px) {
    
    .product-image-box-radial-text-1 h3 {
        font-size: 30px;
    }
    
    .product-image-box-radial-text-3 h4{
        font-size: 15px;
    }
    
    .product-image-box-radial-text-4 h4{
        font-size: 15px;
    }
    
    .product-image-box-radial-text-4 h4 span {
        color: rgb(251, 255, 0);
    }
    
    .product-image-box-radial-text-5 h4 {
        font-size: 15px;
    }
    
    .product-image-box-radial-text-6 h4 {
        font-size: 15px;
    }

}

@media (max-width: 1000px) {

    .product-image-box-radial-text-1 h3 {
        font-size: 22px;
    }

    .product-image-box-radial {
        padding-bottom: 30px;
    }

    .product-image-box-radial-text-1 h3 {
        font-size: 22px;
    }

    .radial-flex {
        display: flex;
        justify-content: space-between;
        /* flex-wrap: wrap; */
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    .product-image-box-radial-text-3 {
        position: relative;
    }
    
    .product-image-box-radial-text-3 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        line-height: 1.5;
    }
    
    .product-image-box-radial-text-3 h4 span {
        color: var(--txt-color-primary);
        font-weight: 600;
        font-size: 20px;
    }
    
    .product-image-box-radial-text-4 {
        position: relative;
        bottom: 4%;
        right: 30px;
    }
    
    .product-image-box-radial-text-4 h4 {
        font-size: 15px;
        color: var(--txt-color-primary);
        text-align: right;
        line-height: 1.5;
    }
    
    .product-image-box-radial-text-4 h4 span {
        color: var(--txt-color-primary);
        /* color: rgb(251, 255, 0); */
    }
    
    .product-image-box-radial-text-5 {
        position: relative;
        padding-bottom: 10px;
        /* bottom: 4%;
        left: 50%;
        transform: translate(-50%); */
    }

    .product-image-box-radial-text-6 {
        position: relative;
    }

    .product-image-box-radial-text-6 h4 {
        color: var(--txt-color-primary);
    }

}

@media (max-width: 780px) {

    .radial-flex {
        flex-direction: column;
    }

    .product-image-box-radial-text-3 {
        bottom: 0%;
        left: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .product-image-box-radial-text-3 h4 {
        text-align: center;
    }

    .product-image-box-radial-text-4 {
        bottom: 0%;
        right: 0px;
    }

    .product-image-box-radial-text-4 h4 {
        text-align: center;
    }

}

@media (max-width: 450px) {

    /* .product-image-box-radial-text-1 {
        top: 5px;
        left: 10px;
    } */

    .product-image-box-radial-text-1 h3 {
        font-size: 16px;
    }

    .product-image-box-radial-text-3 h4 {
        font-size: 12px;
    }

    .product-image-box-radial-text-4 h4 {
        font-size: 12px;
    }

    .product-image-box-radial-text-5 h4 {
        font-size: 12px;
    }

    .product-image-box-radial-text-6 h4 {
        font-size: 12px;
    }

}






/* ovde ubaciti za manje ekrane */

/* -------  END PRODUCT  ----- */


/* ---------- START COMPONENTS --------- */

.background-image-components {
    background-image: url("../img/Render/Mix\ za\ background\ 1.jpg");
    /* background-position-y: -280px; */
    background-position-y: center;
    background-position-x: center;
    /* filter: blur(1px); */
}

.background-image-components::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.components-subtitle-section {
    position: relative;
    top: -30px;
    /* margin: 50px auto; */
    margin: 0px auto;
    /* width: 1000px; */
    max-width: 1000px;
    /* background-color: var(--light-background-color); */
    background-color: white;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px rgba(150,150,150);
}

.components-subtitle h2{
    font-size: 28px;
    color: var(--txt-color-box);
    font-weight: 400;
    text-align: center;
}

.components-subtitle p {
    margin-top: 20px;
    line-height: 1.6;
    text-align: center;
    /* color: rgb(130, 130, 130); */
    color: var(--txt-color-box);
    font-size: 20px;
}

@media (max-width: 1000px) {

    .components-subtitle-section {
        width: 80%;
        margin: 0 auto;
        padding: 0;
    }

    .components-subtitle {
        /* width: 80%;
        margin: 0 auto; */
        /* padding: 20px 10px; */
        padding: 10px 0;
    }

    .components-subtitle h2 {
        font-size: 14px;
        line-height: 1.6;
    }

    .components-subtitle p {
        font-size: 12px;
        line-height: 1.6;
    }

}




.automation-components-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: white;
    padding-top: 150px;
    padding-bottom: 70px;
    /* background-color: #5167af; */
}

.automation-components-box {
    /* width: 400px; */
    width: 25%;
    padding: 10px;
    margin: 30px 15px;
    /* background-color: var(--blue-logo-color); */
    /* background-color: var(--footer-bg-color); */
    border-radius: 15px;
    cursor: default;
}

.automation-components-img {
    transition: 0.5s;
}

.automation-components-box h2 {
    text-align: center;
    padding-bottom: 20px;
    /* background-color: var(--footer-bg-color); */
    color: var(--txt-color-primary);
    /* color: var(--txt-color-box); */
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 1000px) {

    .automation-components-boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: white;
        padding-top: 80px;
        padding-bottom: 30px;
        /* background-color: #5167af; */
    }

    .automation-components-box {
        /* width: 400px; */
        width: 100%;
        margin: 0px 10px;
    }

    .automation-components-box h2 {
        font-size: 12px;
    }

}

/* za hover uvecenja slika komponenti */
@media (min-width: 1000px) {

    .automation-components-img:hover {
        transform: scale(1.05);
    }
}

/* .automation-components-img img {
    width: 100%;
} */


/* ---------- END COMPONENTS --------- */